{"id":2437,"date":"2018-11-02T20:25:27","date_gmt":"2018-11-03T01:25:27","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2437"},"modified":"2018-11-02T21:25:51","modified_gmt":"2018-11-03T02:25:51","slug":"html-css-how-to-understand-the-basics-flexbox-for-responsive-web-design","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/11\/02\/html-css-how-to-understand-the-basics-flexbox-for-responsive-web-design\/","title":{"rendered":"HTML & CSS: How to understand the basics of Flexbox for responsive web design"},"content":{"rendered":"

The CSS3 Flexbox Grid system is based on the idea of a parent\/child container relationship. The parent, if we call it “row” needs to have “display: flex;”. For example:<\/p>\n

\/* Parent *\/\r\n.row { display: flex; }<\/pre>\n
The child, if we give it a class name of “col”, should have “flex: 1;”. The 1 here means 100% width of the container. For example:<\/p>\n
\/* Child *\/\r\n.col { flex: 1; }<\/pre>\n
Once those values are set in the CSS, we can set the following in the HTML:<\/p>\n
<div class=\"row\">\r\n  <div class=\"col\">col<\/div>\r\n<\/div><\/pre>\n
This will produce one column that spans the entire width of the row container. All we need to do to get more columns is add more cols tags. For example:<\/p>\n
<div class=\"row\">\r\n  <div class=\"col\">1 column 100% width<\/div>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"col\">2 columns 50% each<\/div>\r\n  <div class=\"col\">2 columns 50% each<\/div>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"col\">3 columns 33% each<\/div>\r\n  <div class=\"col\">3 columns 33% each<\/div>\r\n  <div class=\"col\">3 columns 33% each<\/div>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"col\">4 columns 25% each<\/div>\r\n  <div class=\"col\">4 columns 25% each<\/div>\r\n  <div class=\"col\">4 columns 25% each<\/div>\r\n  <div class=\"col\">4 columns 25% each<\/div>\r\n<\/div><\/pre>\n
The results can be seen in this codepen:<\/p>\n
\nSee the Pen Flexbox 1 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
Note:<\/strong>
\nIf you expand or contract the width of the html browser window, you will see that each column expands or contracts responsively.<\/p>\n
Now where Flexbox really shines is how it easily allows you to take care of mobile screens. This can be accomplished by using @media queries. For example, we can have small screens that are only 768 pixels wide show our content in a stacked row fashion instead of the complex layout we designed for a larger screen. Here is what the @media rule would look like:<\/p>\n
\/* iPad screen size *\/\r\n@media screen and (min-width: 768px){\r\n  .row {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n  }\r\n}<\/pre>\n
Then in our CSS .row definition, add “flex-direction: column;”:<\/p>\n
\/* Parent *\/\r\n.row { display: flex; flex-direction: column; }<\/pre>\n
Here is an example of what it looks like if we use a min-width of 500px and our screen is resized to less than 500 pixels:<\/p>\n
\"\"<\/p>\n
And here is what that same Flexbox grid looks like when it is 501 pixels wide:<\/p>\n
\"\"<\/p>\n
For more information about Flexbox, see:
\nhttps:\/\/www.w3schools.com\/css\/css3_flexbox.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
The CSS3 Flexbox Grid system is based on the idea of a parent\/child container relationship. The parent, if we call it “row” needs to have “display: flex;”. For example: \/* Parent *\/ .row { display: flex; } The child, if we give it a class name of “col”, should have “flex: 1;”. The 1 here … Continue reading HTML & CSS: How to understand the basics of Flexbox for responsive web design<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[181,10,113,105,182],"class_list":["post-2437","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-media","tag-css","tag-flexbox","tag-html","tag-responsive"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2437"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2437\/revisions"}],"predecessor-version":[{"id":2457,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2437\/revisions\/2457"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}