{"id":522,"date":"2020-01-29T11:08:35","date_gmt":"2020-01-29T05:38:35","guid":{"rendered":"http:\/\/www.myfreeonlinetools.com\/blog\/?p=522"},"modified":"2020-06-11T09:29:24","modified_gmt":"2020-06-11T03:59:24","slug":"flexbox-properties-tutorial-and-how-to-use-with-html-css","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/","title":{"rendered":"Flexbox Properties Tutorial and How to Use with HTML CSS"},"content":{"rendered":"<div id=\"blogDisplayTable\" class=\"blogDisplayTable\">\n<h1>Why Using Flexbox: An Overview of Behind using flexbox.<\/h1>\n<p>In this blog, show you using behind flexbox and main properties of using it in order to flexbox layout.<\/p>\n<h2>What is Flexbox?<\/h2>\n<ul>\n<li>Its is a new module in CSS3 that make easy to the alignment of web elements to one another, in different direction and orders for making responsive website layout.<\/li>\n<li>The main idea behind using flexbox layout that gives container the abilities to expand and to shrink element to best use all the available space.<\/li>\n<li>Flexbox is best replacement of float layouts with doing less code and more readable and logical code.<\/li>\n<li>Its helpfull and completly change the way of one dimensional layouts.<\/li>\n<\/ul>\n<h2>Introduction of Flexbox:\u00a0Flexbox Container<\/h2>\n<h3>1 Display: flex Property<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-528\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-01-1.jpg\" alt=\"Flexbox Container\" width=\"500\" height=\"78\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-01-1.jpg 500w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-01-1-300x47.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>2.\u00a0 Display:flex;\u00a0 Flex Direction-direction:row;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;\u00a0 flex-direction: row;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Result<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-528\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-01-1.jpg\" alt=\"Flexbox Container\" width=\"500\" height=\"78\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-01-1.jpg 500w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-01-1-300x47.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>3. Display:flex; flex-direction: row-reverse;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;\u00a0 flex-direction: row-reverse;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-532\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-reverse.jpg\" alt=\"Flexbox Reverse\" width=\"1000\" height=\"84\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-reverse.jpg 1000w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-reverse-300x25.jpg 300w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-reverse-768x65.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3>5. Display : flex; flex-direction: column;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;\u00a0 flex-direction: column;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-534\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-column.jpg\" alt=\"Flexbox Column\" width=\"600\" height=\"337\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-column.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-column-300x169.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h3>6. Display : flex; flex-direction: column-reverse;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;\u00a0 flex-direction: column-reverse;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-537\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-column-reverse.jpg\" alt=\"Flexbox Column Reverse\" width=\"600\" height=\"337\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-column-reverse.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-column-reverse-300x169.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h3>7. Display : flex; flex-direction: row; justify-content: center;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-540\" style=\"border: 10px solid rgba(0,0,0,0.25);\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-justify-content.jpg\" alt=\"Flexbox Justify Content\" width=\"600\" height=\"58\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-justify-content.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-justify-content-300x29.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h3>8. Display : flex; flex-direction: row; justify-content: space-between;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: space-between;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-541\" style=\"border: 10px solid rgba(0,0,0,0.25);\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-justify-content-space-between.jpg\" alt=\"Flexbox Space Between\" width=\"571\" height=\"83\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-justify-content-space-between.jpg 571w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-justify-content-space-between-300x44.jpg 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/p>\n<h3>9. Display : flex; flex-direction: row; justify-content: space-around;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: space-around;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-543\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/justify-space-around.jpg\" alt=\"Flexbox Justify Space Around\" width=\"571\" height=\"83\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/justify-space-around.jpg 571w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/justify-space-around-300x44.jpg 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/p>\n<h3>10. Display : flex; flex-direction: row; justify-content: space-evenly;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: space-evenly;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-546\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-space-evenly.jpg\" alt=\"Flexbox Space Evenly \" width=\"571\" height=\"83\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-space-evenly.jpg 571w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-space-evenly-300x44.jpg 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/p>\n<h3>11. Display : flex; flex-direction: row; justify-content: space-evenly;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: space-around;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-548\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-space-around.jpg\" alt=\"Flexbox Around\" width=\"571\" height=\"83\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-space-around.jpg 571w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-space-around-300x44.jpg 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/p>\n<h3>12. Display : flex; flex-direction: row; justify-content: flex-end;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: flex-end;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-549\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-end.jpg\" alt=\"Flexbox Flex End\" width=\"571\" height=\"83\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-end.jpg 571w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-end-300x44.jpg 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/p>\n<h3>13. Display : flex; flex-direction: row; justify-content: flex-start;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: flex-start;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-550\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-start.jpg\" alt=\"Flexbox Flex Start\" width=\"571\" height=\"83\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-start.jpg 571w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-start-300x44.jpg 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/p>\n<h3>14. Display : flex; flex-direction: row; justify-content: center; align-item: center;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: center;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-552\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-align-item-center.jpg\" alt=\"Flexbox Align Item Center\" width=\"400\" height=\"135\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-align-item-center.jpg 400w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-align-item-center-300x101.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<h3>15. Display : flex; flex-direction: row; justify-content: center; align-item: flex-start;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: flex-start;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-553\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-start.jpg\" alt=\"Flexbox AlignItem Flex Start\" width=\"400\" height=\"135\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-start.jpg 400w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-start-300x101.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<h3>16. Display : flex; flex-direction: row; justify-content: center; align-item: flex-end;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: flex-end;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-555\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-end.jpg\" alt=\"Flexbox AlignItem Flex End\" width=\"400\" height=\"135\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-end.jpg 400w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-end-300x101.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<h3>17. Display : flex; flex-direction: row; justify-content: center; align-item: flex-stretch;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: stretch;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-557\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-stretch.jpg\" alt=\"Flexbox Align Item Flex Stretch\" width=\"400\" height=\"135\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-stretch.jpg 400w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-flex-stretch-300x101.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<h3>18. Display : flex; flex-direction: row; justify-content: center; align-item: baseline;<\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: baseline;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/p>\n<p>.i4{ font-size: 60px !important; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-562\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-baseline.jpg\" alt=\"Flexbox AlignItem Baseline\" width=\"400\" height=\"135\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-baseline.jpg 400w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-alignItem-baseline-300x101.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<h2>Flex Box Items<\/h2>\n<p>19. Flex Item &#8211; Flex Start<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: center;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/p>\n<p>.i4{ font-size: 60px !important; align-self: flex-start; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-563\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-start.jpg\" alt=\"Flex Align Item Start\" width=\"600\" height=\"300\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-start.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-start-300x150.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>20. Align Item Flex End<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: center;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/p>\n<p>.i4{ font-size: 60px !important; align-self: flex-end; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Output<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-564\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/align-item-flex-end.jpg\" alt=\"Align Item Flex End\" width=\"600\" height=\"300\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/align-item-flex-end.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/align-item-flex-end-300x150.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>21. Flex Item Order<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: center;<br \/>\n}<br \/>\n.i2{ height: 200px;}<br \/>\n.i4{ font-size: 60px !important; align-self: flex-end; order: -1; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Result<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-566\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-order.jpg\" alt=\"Flex Item Order\" width=\"600\" height=\"300\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-order.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-order-300x150.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>22. Other Example of Flex item Order<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i3&#8243;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.container{ display: flex;<br \/>\nflex-direction: row;<br \/>\njustify-content: center;<br \/>\nalign-items: center;<br \/>\n}<\/p>\n<p>.i2{ height: 200px;}<\/p>\n<p>.i4{ font-size: 60px !important; align-self: flex-end; order: -1; }<\/p>\n<p>.i3{ order: -2; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Output<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-568\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-order-two.jpg\" alt=\"Flex Item Order Two\" width=\"600\" height=\"300\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-order-two.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-item-order-two-300x150.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>23. Flexbox flex item property flex-grow.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i3&#8243;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.item{ flex-grow: 1; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Output<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-569\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-glow.jpg\" alt=\"Flex Glow\" width=\"600\" height=\"198\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-glow.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flex-glow-300x99.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>24. Flexbox flex item property flex glow with other element within a div.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i3&#8243;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.item{ flex-grow: 1; }<\/p>\n<p>.i3{ flex-grow:2}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Output<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-572\" src=\"http:\/\/www.myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-basic.jpg\" alt=\"Flex box Flex Basic\" width=\"600\" height=\"202\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-basic.jpg 600w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-flex-basic-300x101.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>24. Flexbox flex item property flex glow with other element within a div.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h4>HTML<\/h4>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;1&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i2&#8243;&gt;2&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i3&#8243;&gt;3&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item i4&#8243;&gt;4&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;item&#8221;&gt;5&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<td>\n<h4>CSS<\/h4>\n<p>.item{ flex-grow: 1; }<br \/>\n.i3{ flex-grow:2}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Output &lt;\/4h&gt;<\/h4>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Why Using Flexbox: An Overview of Behind using flexbox. In this blog, show you using behind flexbox and main properties of using it in order to flexbox layout. What is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":591,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18,22],"tags":[],"class_list":["post-522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flexbox Properties Tutorial and How to Use with HTML CSS - MyFreeOnlineTools<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox Properties Tutorial and How to Use with HTML CSS - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Why Using Flexbox: An Overview of Behind using flexbox. In this blog, show you using behind flexbox and main properties of using it in order to flexbox layout. What is [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-29T05:38:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-11T03:59:24+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"780\" \/>\n\t<meta property=\"og:image:height\" content=\"460\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Flexbox Properties Tutorial and How to Use with HTML CSS\",\"datePublished\":\"2020-01-29T05:38:35+00:00\",\"dateModified\":\"2020-06-11T03:59:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/\"},\"wordCount\":1756,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg\",\"articleSection\":[\"Blog\",\"CSS Tutorial\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/\",\"name\":\"Flexbox Properties Tutorial and How to Use with HTML CSS - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg\",\"datePublished\":\"2020-01-29T05:38:35+00:00\",\"dateModified\":\"2020-06-11T03:59:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg\",\"width\":780,\"height\":460,\"caption\":\"how to use flexbox CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flexbox Properties Tutorial and How to Use with HTML CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexbox Properties Tutorial and How to Use with HTML CSS - MyFreeOnlineTools","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/","og_locale":"en_US","og_type":"article","og_title":"Flexbox Properties Tutorial and How to Use with HTML CSS - MyFreeOnlineTools","og_description":"Why Using Flexbox: An Overview of Behind using flexbox. In this blog, show you using behind flexbox and main properties of using it in order to flexbox layout. What is [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2020-01-29T05:38:35+00:00","article_modified_time":"2020-06-11T03:59:24+00:00","og_image":[{"width":780,"height":460,"url":"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg","type":"image\/jpeg"}],"author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Flexbox Properties Tutorial and How to Use with HTML CSS","datePublished":"2020-01-29T05:38:35+00:00","dateModified":"2020-06-11T03:59:24+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/"},"wordCount":1756,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg","articleSection":["Blog","CSS Tutorial"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/","url":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/","name":"Flexbox Properties Tutorial and How to Use with HTML CSS - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg","datePublished":"2020-01-29T05:38:35+00:00","dateModified":"2020-06-11T03:59:24+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#primaryimage","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/01\/flexbox-tutorial.jpg","width":780,"height":460,"caption":"how to use flexbox CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/flexbox-properties-tutorial-and-how-to-use-with-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Flexbox Properties Tutorial and How to Use with HTML CSS"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=522"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media\/591"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}