Detail Beginner Guide for CSS Flexbox with examples
Tags: css, javascript, html
Published: 2020-04-25 09:32:24

<!-- wp:paragraph -->
<p>Flexbox is not a single property its complete module which comes with the number of features and here we have a complete guide for CSS flex</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before going into detail I just want to answer why we should use flexbox layout instead of traditional way of doing layout webpage using display properties, float properties, positional properties</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Advantages of using flexbox</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Flexbox Equally distribute height and width for the item, even though items are added dynamically, Don't need to care about CSS properties </li><li>easily reverse the structure of  items</li><li>easily grow and shrink the width of the item as per dynamic width of the container</li><li>easily control the direction of the elements like vertical or horizontal on the basis of a single property</li><li>change the order of any element</li><li>96% of the browser having support for flexbox </li></ul>
<!-- /wp:list -->



<!-- wp:heading -->
<h2>Layout for flexbox</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>we should know how flexbox works, please refer below diagram</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"wide","id":386,"sizeSlug":"large"} -->
<figure class="wp-block-image alignwide size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/Architecture-of-flexbox.png" alt="Layout of flexbox" class="wp-image-386"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>flexbox is divided into two axis main axis and cross axis. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In normal layout when we are using display inline or inline block. it goes from left to right only</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>main-axis: </strong> This is the default axis where items laid out by default. it's not necessarily horizontal always, it can be vertical also depending upon flex-direction</li><li><strong>Main start/ Main-end: </strong> Items will be placed from main-start  to main-end</li><li><strong>Main size: </strong> width or height of the container depending upon flex direction</li><li><strong>Cross-axis: </strong>Cross axis is perpendicular to the main axis. </li><li><strong>Cross-start/Cross-end: </strong>Items will be laid out started from cross-start to cross-end</li><li><strong>Cross-size: </strong>The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Before starting with the flexbox properties we should understand which properties meant for flex container and flex items</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>Flexbox container properties</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>display</li><li>flex-direction</li><li>flex-wrap</li><li>justify-contents</li><li>align-items</li><li>align-contents</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>Flexbox item properties      </h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>order</li><li>flex-grow</li><li>flex-shrink</li><li>flex-basis</li><li>flex</li><li>align-self</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:heading -->
<h2>Flexbox container properties</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>display</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As we know display property have number of value like inline, block, inline-block etc. But if we are giving value as flex then we are turning on flexbox context</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.container {
  display: flex
}</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>flex-direction</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>flex-direction decides that how items will be laid out on main-axis horizontally or vertically</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flex-direction: row|row-reverse|column|column-reverse|initial|inherit;</code></pre>
<!-- /wp:code -->

<!-- wp:image {"id":394,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/flex-direction-row.png" alt="flex-direction" class="wp-image-394"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":396,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/flex-direction_column.png" alt="flex-direction-column" class="wp-image-396"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Above are the possible values for flex-direction property</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>row: </strong> row is by default value for flex-direction where item will be placed from left to right</li><li><strong>row-reverse:</strong> items will be placed from right to left</li><li><strong>column: </strong>Items will be placed vertically top to  bottom</li><li><strong>column-reverse: </strong>Items will be placed bottom to top</li><li><strong>initial:</strong> It set's value to the default</li><li><strong>inherit: </strong> inherit value from the parent</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>flex-wrap:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>flex-wrap controls the behaviour that item will move into the next line if container width is less than total item width.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flex-wrap: nowrap | wrap | wrap-reverse;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Default  value: </strong>nowrap</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":398,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/flex-wrap.png" alt="flex-wrap" class="wp-image-398"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li><strong>no-wrap</strong>: fit into the one line by adjusting width of the item </li><li><strong>wrap:</strong> item will be laid down to next line from top to bottom</li><li><strong>wrap-reverse: </strong>item will be laid down to next line from bottom to top</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>flex-flow</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>flex flow is shorthand for flex-direction and flex-wrap</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flex-flow: &lt;flex-direction> | &lt;flex-wrap></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Default value: </strong>row no-wrap</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>let's see some examples</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":404,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/flex-flow_-row-no-wrap-1.png" alt="flex-flow" class="wp-image-404"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Above we saw an example of flex-flow where flex-direction is row.You can do same for flex-direction column just consider above thing  vertically</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>justify-content</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>justify-conent is used align items on the main-axis.Its container propery so it will align all child items to the particular position like to the center , start or end or giving space between them.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Default value: </strong>flex-start</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":406,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/justify-content.png" alt="justify-content" class="wp-image-406"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>flex-start</strong> - Align items to the start of the container depending upon flex-direction</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>                 for eg.  </p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.container {
  flex-direction: row-reverse
  justify-content: flex-start;
}</code></pre>
<!-- /wp:code -->

<!-- wp:image {"id":408,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image.png" alt="" class="wp-image-408"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see above flex-start started from right side not from writing mode direction</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>center</strong>:  Align items to the center</li><li><strong>flex-end</strong>: Align items to the end of the container as per flex-direction</li><li><strong>space-around</strong>: Gives space around the items by adjusting width</li><li><strong>space-between</strong>: gives space between the items not at the start and end of the container</li><li><strong>space-evenly</strong>: gives equal amount of space around the item</li><li><strong>start</strong>: Align items to the start of the container as per writing mode direction</li><li><strong>end</strong>: Align items to the end of the container as per writing mode direction</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>align-items</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>align items property is used to align items in respective of cross axis like we have justify content for main-axis</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Default value: </strong>stretch</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":410,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/align-tems.png" alt="align items" class="wp-image-410"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li><strong>stretch</strong>:  occupies full height of the container if height to the items not given externally</li><li><strong>flex-start</strong>: align items to the start of the container in consideration with cross axis</li><li><strong>center</strong>: align items to the center in consideration with cross axis</li><li><strong>flex-end</strong>: align items to the end in consideration with cross axis</li><li><strong>baseline</strong>: align items as per baseline of the item content in consideration with cross axis</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>align-content</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>align-content is used to align rows not items in respective of cross-axis</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I know you guys will get confuse what is differnece between align-items and align content</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>let' s see an example by comparing align-items and align-content</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":443,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/align-items_-center.png" alt="align-content" class="wp-image-443"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see above align-items: center  actually align items to center in respective of cross-axis and align-content align rows to the center in respective of cross-axis</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we have taken example with two rows because align-content have no effect single line</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Flex item properties</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>order</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Using&nbsp;<strong>order&nbsp;</strong>property it’s possible to re-arrange the natural order of container items.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Default value: 0</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":421,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/order-1.png" alt="order" class="wp-image-421"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see in above diragram , </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>First diagram </strong> shows default behaviour where all item have order value 0</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In <strong>Second diagram</strong>  item 1(highlited one) moves to last because its order value is greater than remaining 3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In <strong>third diagram </strong>item 3 moves to first position because it has order value -1 which smaller than other three items</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In <strong>Fourth diagram </strong> item 1 and item 3 moves to last because their order value is greater than others</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>flex-grow</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>flex-grow is allow  item to grow as container size greater than the total items size</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Default value: </strong>0</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":414,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/flex-grow_0.png" alt="flex-grow" class="wp-image-414"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In above example</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>First diagram </strong>shows default behaviour where items not accomadating remaining space takes only width provided to the item</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In<strong> Second diagram, </strong> you can see we made flex-grow: 1 to all items it means all item divided remaining space in equal ratio. It will behave same if we give value as 2 to all item because we are giving ratio value</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In <strong>third diagram,  </strong>item 2(highlighted one) takes twice as much as space as compared to other items because it has value 2 and its double of other items value </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>NOTE</strong>: negative values are not allowed</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>flex-shrink</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>flex-shrik property allow item to shrink as container size decreases</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Default value: 0</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If all items in the container have value as 1 then all the items will shrink in equal ratio</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And all item have value as 1 except one item which have value 2 then this item will shrink as twice as other items</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>for eg.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":417,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/flex-shrink_-1-1.png" alt="flex-shrink" class="wp-image-417"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see above given flex-shrink : 2 to the third element shrink twice as much as other elements.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Negative values are not allowed</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>flex-basis</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>flex-basis is nothing but the min-width for the container items in flexbox context</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Default value: </strong>Auto</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For eg. If we haven't provided flex-basis property then its by default auto then flexbox items will take width which is equal to content width</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>flex basis always given in unit it can be %, px, em etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>flex</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>flex is shorthand for flex-grow, flex-shrink and flex-basis</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Default value:</strong> 0 1 auto</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flex-grow: &lt;flex-grow> &lt;flex-shrink> &lt;flex-basis></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>there are number of possibilities for flex values</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>/* One value, If unitless number then its flex-grow */
flex: 1;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>align-self</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>align-self is for aligning individual item in respective of cross-axis and it will override value set by align items</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":419,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/align-self_-center.png" alt="align-self" class="wp-image-419"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see In above example we have given <strong>align-self: center </strong>to the item 2 and then only that item position has changed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Example</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>we have learned a lot lets take an practical example</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Centering element vertically and horizantally</h3>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>//html
&lt;!DOCTYPE html>
&lt;head>
    &lt;link rel="stylesheet" href="index.css" />
&lt;/head>
&lt;body>
&lt;section>
    &lt;div class="container">
        
        &lt;div class="item">
            
          &lt;/div>
       
         
      &lt;/div>
&lt;/section>
&lt;/body>
&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:code -->
<pre class="wp-block-code"><code>//css
.container {
    display: flex;
    width: 47%;
    height: 300px;
    border: 2px solid;
    padding: 5px;
}

.container .item {
    flex-basis: 100px;
    height: 96px;
    border: 2px solid;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: cadetblue;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and output will be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":445,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-2.png" alt="" class="wp-image-445"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Creating a Navbar </h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>navbar.html</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>

&lt;head>
    &lt;link rel="stylesheet" href="index.css" />
&lt;/head>

&lt;body>
    &lt;section class="main-container">
        &lt;div class="logo-container container">
            &lt;strong>Logo&lt;/strong>
        &lt;/div>
        &lt;ul class="menu-container container">
            
            &lt;li class="menu">
                &lt;strong>
                    Home
                &lt;/strong>
            &lt;/li>
            &lt;li class="menu">
                &lt;strong>
                    Contact Us
                &lt;/strong>
            &lt;/li>
            &lt;li class="menu"> 
                &lt;strong>
                    About Us
                &lt;/strong>
            &lt;/li>

        &lt;/div>
    &lt;/section>
&lt;/body>

&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and css file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.main-container {
    display: flex;
    background: #ce8888;
}
.container {
    flex-basis: 50%;
}
.logo-container {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    color: white;
    padding: 10px;
    font-size: x-large;
     
}
.menu-container {
    display: flex;
    height: 60px;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    width: 50%;
    margin: 0;
}

.menu-container .menu {
  
    padding: 4px 10px;
    border-radius: 5px;
    color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    cursor: pointer;
}

.menu-container .menu:active ,.menu-container .menu:hover{
    background: repeating-linear-gradient(45deg, #824e4e, transparent 100px)
}
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and output will be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":446,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-3.png" alt="" class="wp-image-446"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You can check <a href="https://codepen.io/nitinhepat/pen/BaoWzOO" target="_blank" rel="noreferrer noopener">demo here</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CSS flexbox has very good feature to do layout for the webpage. If you guys understand Please share it and you feel free to ask question in Comments</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>follow me on <a rel="noreferrer noopener" href="https://twitter.com/HepatNitin" target="_blank">twitter</a> for updates on latest projects</p>
<!-- /wp:paragraph -->