<p>This articles has working examples of flex box</p>
<h2 id="heading-flex-containers">Flex Containers</h2>
<h3 id="heading-flex-direction-row-default-andamp-column">flex-direction :: row (default) &amp; Column</h3>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/shyamkunda/pen/oNaeqwB">https://codepen.io/shyamkunda/pen/oNaeqwB</a></div>
<p> </p>
<h3 id="heading-flex-direction-or-flex-wrap-or-flex-flow">flex-direction | flex-wrap | flex-flow</h3>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/shyamkunda/pen/ZEqJVRK">https://codepen.io/shyamkunda/pen/ZEqJVRK</a></div>
<p> </p>
<h3 id="heading-justify-content">Justify-Content</h3>
<p>justify-content is focused on main axis(row axis)</p>
<p>Below code shows the all examples of justify-cotent</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/shyamkunda/pen/OJBjKxY">https://codepen.io/shyamkunda/pen/OJBjKxY</a></div>
<p> </p>
<h3 id="heading-flex-box-align-items">Flex box : align-items</h3>
<p>align-items focused on cross access(column)</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/shyamkunda/pen/JjmroWO">https://codepen.io/shyamkunda/pen/JjmroWO</a></div>
<p> </p>
<h3 id="heading-align-items-baseline">align-items :: baseline</h3>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/shyamkunda/pen/ExdorVW">https://codepen.io/shyamkunda/pen/ExdorVW</a></div>
<p> </p>
<h3 id="heading-align-content">align-content</h3>
<blockquote>
<p><strong>align-content</strong> determines the spacing between lines</p>
<p><strong>align-items</strong> determines how the items as a whole are aligned within the container.</p>
<p>When there is only one line, <strong>align-content</strong> has no effect</p>
</blockquote>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/shyamkunda/pen/WNadPxe">https://codepen.io/shyamkunda/pen/WNadPxe</a></div>


This articles has working examples of flex box

## Flex Containers

### flex-direction :: row (default) & Column

%[https://codepen.io/shyamkunda/pen/oNaeqwB] 

### flex-direction | flex-wrap | flex-flow

%[https://codepen.io/shyamkunda/pen/ZEqJVRK] 

### Justify-Content

justify-content is focused on main axis(row axis)

Below code shows the all examples of justify-cotent

%[https://codepen.io/shyamkunda/pen/OJBjKxY] 

### Flex box : align-items

align-items focused on cross access(column)

%[https://codepen.io/shyamkunda/pen/JjmroWO] 

### align-items :: baseline

%[https://codepen.io/shyamkunda/pen/ExdorVW] 

### align-content

> **align-content** determines the spacing between lines
> 
> **align-items** determines how the items as a whole are aligned within the container.
> 
> When there is only one line, **align-content** has no effect

%[https://codepen.io/shyamkunda/pen/WNadPxe]

Flex Box in CSS

CSS :: Flex Box

Flex Containers

flex-direction :: row (default) &amp; Column

flex-direction | flex-wrap | flex-flow

Justify-Content

Flex box : align-items

align-items :: baseline

align-content

Software developer. Expert in designing Test Automation Solutions with Good reporting and Analytical features.


Shyam Kunda