{"id":417,"date":"2015-10-07T11:52:13","date_gmt":"2015-10-07T11:52:13","guid":{"rendered":"http:\/\/fazilabdulkhadar.com\/?p=417"},"modified":"2021-02-23T09:52:54","modified_gmt":"2021-02-23T09:52:54","slug":"the-power-of-flex-box-in-css3","status":"publish","type":"post","link":"https:\/\/fazilabdulkhadar.com\/index.php\/2015\/10\/07\/the-power-of-flex-box-in-css3\/","title":{"rendered":"The power of Flex-box in css3"},"content":{"rendered":"<h2>Why is Flexbox needed?<\/h2>\n<p>The developers had used the tables, float, inline and other elements to create the layouts. The flexbox module is a w3C last call working Draft. Flexbox helps us to aims at providing a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown or dynamic. Flexbox also helps us to arrange the alignments or layout based on different screen size. Many developers are would find the usage of flexbox are very easy and like to use to create the layouts.<\/p>\n<h3>Power of Flexbox.<\/h3>\n<p>Below are the main points or concepts which make the flexbox being powerful.<\/p>\n<h3>Declare FlexBox. It enables a flex context for all its direct children.<\/h3>\n<p>.flex-container {<br \/>\ndisplay: flex;<br \/>\n}<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1042 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/31.jpeg\" alt=\"\" width=\"400\" height=\"200\" data-sizes=\"auto\" data-srcset=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/31.jpeg 400w, https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/31-300x150.jpeg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n<p>&nbsp;<\/p>\n<h3>flex-direction<\/h3>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1043 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/32.jpeg\" alt=\"\" width=\"400\" height=\"157\" data-sizes=\"auto\" data-srcset=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/32.jpeg 400w, https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/32-300x118.jpeg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n<p><em>.flex-container {<\/em><br \/>\n<em>flex-direction: row | row-reverse | column | column-reverse;<\/em><br \/>\n<em>}<\/em><\/p>\n<h3>flex-wrap<\/h3>\n<p><em>.flex-container{<\/em><br \/>\n<em>flex-wrap: nowrap | wrap | wrap-reverse;<\/em><br \/>\n<em>}<\/em><\/p>\n<p>nowrap (default): single-line \/ left to right<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-left\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1044 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/33.jpeg\" alt=\"\" width=\"300\" height=\"100\" \/><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>wrap: multi-line \/ left to right<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-left\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1045 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/34.jpeg\" alt=\"\" width=\"300\" height=\"221\" \/><\/div>\n<p>wrap-reverse: multi-line \/ right to left<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-left\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1046 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/35.jpeg\" alt=\"\" width=\"300\" height=\"221\" \/><\/div>\n<h3>Justify-content<\/h3>\n<p>We can align the content (flex-item ) inside the flex container in the following way.<br \/>\n.flex-container {<br \/>\njustify-content: flex-start | flex-end | center | space-between | space-around;<br \/>\n}<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1047 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/36.jpeg\" alt=\"\" width=\"500\" height=\"507\" data-sizes=\"auto\" data-srcset=\"https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/36.jpeg 500w, https:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/36-296x300.jpeg 296w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/div>\n<p>Order<br \/>\n.item {<br \/>\norder: number;<br \/>\n}<br \/>\nWe can say the order of the flex item, especially for some screen width or conditions. Please see the image below for a more clear idea.<\/p>\n<p>Browser Support<br \/>\nThe Flexbox has only limited support. But the good thing is that it will be work in all modern browsers. Please check the browser support for the flexbox <a href=\"http:\/\/caniuse.com\/#search=flexbox\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">here<\/a>.<\/p>\n<p>References Resources<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Using_CSS_flexible_boxes\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Using_CSS_flexible_boxes<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/<\/a><\/li>\n<li><a href=\"http:\/\/learnlayout.com\/flexbox.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">http:\/\/learnlayout.com\/flexbox.html<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Why is Flexbox needed? The developers had used the tables, float, inline and other elements to create the layouts. The flexbox module is a w3C last call working Draft. Flexbox helps us to aims at providing a more efficient way to layout, align and distribute space among items in a container, even when their size&hellip;<\/p>\n","protected":false},"author":1,"featured_media":418,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/comments?post=417"}],"version-history":[{"count":4,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":1050,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/417\/revisions\/1050"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media\/418"}],"wp:attachment":[{"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}