# System design

<p>First solve the problem then write the code<p>

<br>

## Table of content 
<br>
<ul>
  <li><a href="#Diplay">Diplay</a></li>
  <li><a href="#Flex">Flex</a></li>
  <ul>
    <li><a href="#Enabling-flexbox">Enabling flexbox</a></li>
    <li><a href="#Flex-direction">Flex direction</a></li>
    <li><a href="#Flex-justify">Flex justify</a></li>
    <li><a href="#Flex-align">Flex align</a></li>
    <li><a href="#Flex-align-self">Flex align self</a></li>
    <li><a href="#Flex-wrap">Flex wrap</a></li>
  </ul>
  <li><a href="#Float">Float</a></li>
  <ul>
    <li><a href="#Float-direction">Float direction</a></li>
</ul>
<br>


<hr>
<br>
<br>


##  <span id="Diplay">Diplay</span>
<br>
<section>

  <div >
    <p>Specify the elements <code>display</code> property. These classes can be applied using the following format <code>d-{display}</code>.
    </p>
  </div>
  <div >
    <ul>
      <li><code>d-inline-flex</code> - sets the element display property to <code>inline-flex</code></li>
      <li><code>d-flex</code> - sets the element display property to <code>flex</code></li>
      <li><code>d-inline-block</code> - sets the element display property to <code>inline-block</code></li>
      <li><code>d-block</code> - sets the element display property to <code>block</code></li>
      <li><code>d-inline</code> - sets the element display property to <code>inline</code></li>
      <li><code>d-none</code> - sets the element display property to <code>none</code></li>
    </ul>
  </div>
</section>


<hr>
<br>
<br>

## <span id="Flex">Flex</span>
<br>
<p>Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.</p>

<p>You can also customize flex utilities to apply based upon various breakpoints.</p>


<br>
<br>

### <span id="Enabling-flexbox">Enabling flexbox</span>
<ul>
  <li><strong>.d-flex</strong></li> 
  <li><strong>.d-inline-flex</strong></li> 
  <br>
  <li><strong>.d-md-flex</strong></li> 
  <li><strong>.d-lg-flex</strong></li> 
</ul>


<br>
<br>

### <span id="Flex-direction">Flex direction</span>
<br>
<ul>
  <li><strong>.flex-row</strong></li> 
  <li><strong>.flex-row-reverse</strong></li> 
  <li><strong>.flex-column</strong></li> 
  <li><strong>.flex-column-reverse</strong></li> 
  <br>
  <li><strong>.flex-md-row</strong></li> 
  <li><strong>.flex-lg-row</strong></li> 
</ul>

<br>
<br>

###  <span id="Flex-justify">Flex-justify</span>
<br>

<ul>
<li><strong>.justify-start</strong></li> <li><strong>.justify-end</strong></li> <li><strong>.justify-center</strong></li> <li><strong>.justify-space-between</strong></li> <li><strong>.justify-space-around</strong></li>
  <br>
  <li><strong>.justify-md-start</strong></li> 
  <li><strong>.justify-lg-start</strong></li> 
</ul>


<br>
<br>

### <span id="Flex-align">Flex align</span>
<br>
<ul>
  <li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li>
  <br>
  <li><strong>.align-md-start</strong></li> 
  <li><strong>.justialignfy-lg-start</strong></li> 
</ul>


<br>
<br>

###  <span id="Flex-align-self">Flex align self</span>
<br>

<ul>
  <li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li>
  <br>
  <li><strong>.align-md-start</strong></li> 
  <li><strong>.align-lg-start</strong></li> 
</ul>

<br>
<br>

###  <span id="Flex-wrap">Flex wrap</span>
<br>
<ul>
  <li><strong>.flex-nowrap</strong></li> <li><strong>.flex-wrap</strong></li> <li><strong>.flex-wrap-reverse</strong></li> 
  <br>
  <li><strong>.flex-md-nowrap</strong></li> 
  <li><strong>.flex-lg-nowrap</strong></li> 
</ul>

<hr>
<br>
<br>

## <span id="Float">Float</span>
<br>
<p>Float utility classes.</p>

<p>You can also customize flex utilities to apply based upon</p>

<br>
<br>

### <span id="Float-direction">Float direction</span>
<br>
<ul>
  <li><strong>.float-left</strong></li> 
  <li><strong>.float-right</strong></li>
  <br>
  <li><strong>.float-md-left</strong></li> 
  <li><strong>.float-lg-left</strong></li>  
</ul>





##  <span id="Spacing">Spacing</span>
<br>

<p>The helper classes apply <strong>margin</strong> or <strong>padding</strong> to an element ranging from <em>0 to 5</em>. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format <code>{property}{direction}-{size}</code>.</p>

<p>The <strong>property</strong> applies the type of spacing:</p>

<div ><ul>
<li><code>m</code> - applies <code>margin</code></li>
<li><code>p</code> - applies <code>padding</code></li>
</ul>
</div>

<p>The <strong>direction</strong> designates the side the property applies to:</p>

<div ><ul>
<li><code>t</code> - applies the spacing for <code>*-top</code></li>
<li><code>b</code> - applies the spacing for <code>*-bottom</code></li>
<li><code>l</code> - applies the spacing for <code>*-left</code></li>
<li><code>r</code> - applies the spacing for <code>*-right</code></li>
<li><code>x</code> - applies the spacing for both <code>*-left</code> and <code>*-right</code></li>
<li><code>y</code> - applies the spacing for both <code>*-top</code> and <code>*-bottom</code></li>
<li><code>a</code> - applies the spacing for the property in all directions</li>
</ul>
</div>
<p>The <strong>size</strong> controls the increment of the property:</p>


Example:

```html
<template>
  <div>
    <span class="pl-3">Test</span><br>
    <span  class="ml-5 "
    >Test</span>
  <div>
</template>