{"id":18624,"date":"2020-06-29T15:40:06","date_gmt":"2020-06-29T22:40:06","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18624"},"modified":"2020-12-29T11:32:19","modified_gmt":"2020-12-29T19:32:19","slug":"css-flexbox","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-flexbox\/","title":{"rendered":"CSS Flexbox"},"content":{"rendered":"\n

The CSS Flexbox Model was created to improve the established CSS Box Model<\/a>. The Flexbox Model still contains the major elements of the Box Model (margin<\/a>, padding<\/a>, border<\/a> and content), but offers flexibility to best fill the space with the container\u2019s\/parent\u2019s children. 
<\/p>\n\n\n\n

This tutorial will help you to understand the flexbox module a bit better so you can start to make your sites more responsive.

The following is starter code for a basic flexbox model demonstration \u2013 please follow along as we talk about flexbox! 
<\/p>\n\n\n\n

<!DOCTYPE html>\n  <head>\n    <title>Flexbox<\/title>\n    <style>\n       * {\n        \tbox-sizing: border-box;\n        \tfont-family: 'Roboto'\n       }\n      .parent-container {\n        \theight: 700px;\n        \tbackground: green;\n        \twidth: 700px;\n        \tpadding: 20px;\n      }\n      .child-item {\n        \theight: 200px;\n        \twidth: 200px;\n        \tmargin: 0px;\n        \tpadding: 20px;\n      }\n      .child-item:first-child {\n        background: orange;\n      }\n      \n      .child-item.one {\n        background: purple;\n      }\n      .child-item.two {\n        background: aliceblue;\n      }\n      .child-item.three {\n        background: grey;\n      }\n      .child-item.four {\n        background: pink;\n      }\n      .child-item.five {\n        background: yellowgreen;\n      }\n      .child-item.six {\n        background: red;\n      }\n      .child-item.seven {\n        background: blanchedalmond;\n      }\n      .child-item.eight {\n        background: white;\n      }\n      .child-item.nine {\n        background: lightblue;\n      }\n      .child-item.nine {\n        background: darkred;\n      }\n      .child-item:last-child {\n        background: yellow;\n      }\n\n\t<\/style>\n <\/head>\n <body>\n  \t<div class="parent-container">\n\t\t<div class="child-item">Lisa Simpson<\/div>\n        \t<div class="child-item one">Bart Simpson<\/div>\n        \t<div class="child-item two">Maggie Simpson<\/div>\n        \t<div class="child-item three">Homer Simpson<\/div>\n        \t<div class="child-item four">Marge Simpson<\/div>\n        \t<div class="child-item five">Grampa Simpson<\/div>\n        \t<div class="child-item six">Santa's Little Helper<\/div>\n        \t<div class="child-item seven">Apu Nahasapeemapetilon<\/div>\n        \t<div class="child-item eight">Moe Szyslak<\/div>\n        \t<div class="child-item nine">Ned Flanders<\/div>\n        \t<div class="child-item ten">Snowball II<\/div>\n    <\/div>\n\n\t<script src="" async defer><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
<\/h2>\n\n\n\n
Parent Container (Flexbox) Properties<\/h2>\n\n\n\n
display: flex<\/h3>\n\n\n\n
The display property has several values we can use to position our containers on the screen. You may have seen block, inline-block, none, hidden, inline already, but the one we are going to focus on right now is called flex<\/strong>. 
<\/p>\n\n\n\n
First, what I would like you to do is envision a large container \u2013 a treasure chest, a toy box or a cardboard box \u2013 and then imagine putting items inside the container. The large container is what we call the parent<\/strong> or flexbox<\/strong> and the smaller items that go inside the container are the children <\/strong>or flex items.<\/strong>
<\/p>\n\n\n\n
When we add display:flex<\/code> to a parent container, the property is assigned to that container and that container alone \u2013 the children do not inherit the property (however, they can use the property for their own containers that will affect their<\/em> children). 
<\/p>\n\n\n\n
This property opens all kinds of other properties we can use that we were not able to before:  flex-direction<\/code>, justify-content<\/code>, align-items<\/code>, align-self<\/code>, flex-wrap<\/code> and flex-flow<\/code>.
<\/p>\n\n\n\n
Run the code editor above. Right now, you should see a large green container, the parent container, and 11 smaller containers, the child containers, inside the parent. 
<\/p>\n\n\n\n
The orientation of the child containers are on top of each other because the default is display: block<\/code>. If you recall, when we use display: block<\/code>, the container takes up the entire row it\u2019s in. The margin\u2019s default expands to the width of the parent container, resulting in both child containers being on top of each other. 
<\/p>\n\n\n\n
In contrast, using display: flex<\/code> allows us to easily position the child containers any way we like in the parent container without having to use older box model properties like float and vertical-align.
<\/p>\n\n\n\n
Try adding display: flex<\/code> to the CSS in the style tag in the code editor so that the parent container\u2019s CSS looks like this:<\/p>\n\n\n\n
.parent-container {\nheight: 700px;\nbackground: green;\nwidth: 700px;\npadding: 20px;\ndisplay: flex;<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Adding display: flex<\/code> to the .parent-container<\/code> will result in a change to the orientation of the child containers. Once you hit ,  you should now see the child containers side-by-side. 
<\/p>\n\n\n\n
By using display: flex<\/code> instead of display: block<\/code>, the default margin is set to 0. We can then manipulate it however we see fit!
<\/p>\n\n\n\n
flex-direction<\/h3>\n\n\n\n
The flex-direction property sets up the main axis of our container. The default setting in the flex container is row. <\/strong>When setting up the parent container with display:flex<\/code>, there is no need to establish a flex-direction unless you need your content to be in a column. 
<\/p>\n\n\n\n
The main axis in the default direction is left to right and the cross axis is top to bottom, as seen here:<\/p>\n\n\n\n
\"\"
flex-direction: row establishes the main axis from left to right and the cross axis from top to bottom. <\/strong><\/figcaption><\/figure>\n\n\n\n
Let\u2019s try adding flex-direction: column<\/code> to our .parent-container<\/code> in the code editor above. What happens when you press? 
<\/p>\n\n\n\n
It seems to be that the axes flip when we switch flex-direction<\/code> to column: what was our main axis becomes the cross axis and then what was our cross axis becomes the main axis, as illustrated below: 
<\/p>\n\n\n\n
\"\"
flex-direction: column establishes the main axis from top to bottom and the cross axis from left to right.<\/strong><\/figcaption><\/figure>\n\n\n\n
As a result, our children containers in our example flipped their axes! So now the child containers are once again on top of each other. 
<\/p>\n\n\n\n
The biggest thing to remember about flex-direction<\/code> is that the direction of the main axis corresponds to the value of your flex-direction <\/code>property (column is top to bottom, row is left to right). 
<\/p>\n\n\n\n
Justify-content concerns itself with the spacing on the main axis and align-items concerns itself with spacing around the cross axis. We\u2019ll get into those properties a little later.
<\/p>\n\n\n\n
There are two other possibilities for flex-direction: row-reverse<\/code> and column-reverse<\/code>. These properties are very similar to row and column, but the flex-items<\/code> are laid in a reverse order, right to left, in the case of row-reverse, and bottom to top for column-reverse.
<\/p>\n\n\n\n
The use case for these particular values comes when you need to have a different layout or order on your page from web to mobile or tablet. 
<\/p>\n\n\n\n
flex-wrap<\/h3>\n\n\n\n
So far we have learned how display: flex<\/code> affects a parent\u2019s child containers and then how to manipulate the flow of those child containers in a row or in a column. What if the size of the parent runs out of room? What happens? And how can we fix it?
<\/p>\n\n\n\n
The answer comes in the form of the property called flex-wrap<\/code>. By default, flex-wrap<\/code> is set to nowrap<\/code>. This means that the child containers can overflow the parent container, causing unwanted layout problems. Let\u2019s try adding flex-wrap: wrap<\/code>; to the .parent-container<\/code> and see what happens: 
<\/p>\n\n\n\n
\"\"
flex-wrap: wrap makes sure that the contents of the main container don\u2019t go outside that container\u2019s border.<\/strong><\/figcaption><\/figure>\n\n\n\n
The layout of the container here looks much nicer. Flex-wrap will take all the children components, lay them side by side until it hits the width of the parent container and then move to the next row to add more child containers to repeat the process until all of the containers have been displayed. 
<\/p>\n\n\n\n
Flex-wrap has three available properties:  nowrap, wrap and wrap-reverse. wrap-reverse is the same as wrap except that it flows bottom to top instead of top to bottom. <\/p>\n\n\n\n
<\/p>\n\n\n\n
flex-flow<\/h3>\n\n\n\n
Flex-flow is shorthand for flex-direction<\/code> and flex-wrap<\/code>. The syntax is flex-flow: column wrap<\/code> if you would like your flex-direction to be column and your flex-wrap to be wrap. flex-flow: row nowrap<\/code> is the default value. <\/p>\n\n\n\n
justify-content<\/h3>\n\n\n\n
The justify content property is concerned with alignment along the main axis of the parent container. It helps to distribute your flex-items<\/code> across the main axis without you having to calculate the space needed. The six most commonly used property values for justify-content<\/code> are flex-start<\/code> (the default), flex-end<\/code>, center<\/code>, space-around<\/code>, space-between<\/code> and space-evenly<\/code>. <\/p>\n\n\n\n
<\/p>\n\n\n\n
flex-start:<\/h4>\n\n\n\n
\"justify

justify-content: flex-start<\/code> is the default setting for this property. All the child containers\/flex-items observe margin and padding, but congregate towards the start of the main axis. <\/strong><\/figcaption><\/figure>\n\n\n\n
<\/p>\n\n\n\n
flex-end:<\/h4>\n\n\n\n
\"justify
justify-content: flex-end<\/code> \u2013 All the child containers\/flex-items observe margin and padding, but congregate towards the end of the main axis. <\/strong><\/figcaption><\/figure>\n\n\n\n
center:<\/h4>\n\n\n\n
\"justify
 justify-content: center<\/code> \u2013 All the child containers\/flex-items observe margin and padding, but congregate towards the center of the main axis. <\/strong><\/figcaption><\/figure>\n\n\n\n
space-around:<\/h4>\n\n\n\n
\"justify
 justify-content: space-around<\/code> \u2013 All the child containers\/flex-items observe margin and padding, but they also have equal space on either side of each individual container.<\/strong> 
<\/figcaption><\/figure>\n\n\n\n
<\/p>\n\n\n\n
space-between:<\/h4>\n\n\n\n
\"justify
 justify-content: space-between<\/code> \u2013 All the child containers\/flex-items observe margin and padding. The first container and the last container are at either end of the container with the rest of the containers distributed in between. <\/strong><\/figcaption><\/figure>\n\n\n\n
space-evenly:<\/h4>\n\n\n\n
\"justify
justify-content: space-evenly<\/code> \u2013 All the child containers\/flex-items have equal space between all child containers as well as between containers and edges. <\/strong><\/figcaption><\/figure>\n\n\n\n
align-items<\/h3>\n\n\n\n
The biggest difference between align-items<\/code> and justify-content<\/code>, besides the axis it distributes the child containers on, is its default value. As a reminder, when we use flex-direction<\/code> the default value for justify-content<\/code> is flex-start<\/code>. That is not the case for align-items<\/code>. Instead, the default value is stretch. 
<\/p>\n\n\n\n
To illustrate, let\u2019s go back to the code editor at the top of the page and take out the width and height on the .child-container<\/code>. We already have display: flex <\/code>and flex-direction<\/code> set. Let\u2019s toggle between flex-direction: row<\/code> and flex-direction: column<\/code> to see how the container behaves without having any constraints on it. How does it compare to what you would expect? 
<\/p>\n\n\n\n
With no align-items<\/code> rule set, the child container stretches to the size of the parent container on the cross axis. However, if we set an align-items<\/code> property on the parent container, the size of the child container will automatically adjust to the size of the content plus whatever padding and border you have on it. 
<\/p>\n\n\n\n
align-items: stretch<\/h4>\n\n\n\n
\"align
align-items: stretch<\/code> \u2013 align-items: stretch is the default value for this property. All the child containers\/flex-items will adjust main axis size based on the contents of the child container but the cross axis will stretch to the size of the parent container. <\/strong><\/figcaption><\/figure>\n\n\n\n
align-items: center<\/h4>\n\n\n\n
\"align
align-items: center<\/code> \u2013 All the child containers\/flex-items will adjust main-axis size and cross-axis size based on the contents of the child container and then position itself to the center of the cross-axis. <\/strong><\/figcaption><\/figure>\n\n\n\n
All of the other properties that we went through for justify-content<\/code> also apply here to align-items<\/code> and mean the same thing, except that we have just switched which axis we are on. 
<\/p>\n\n\n\n
Child Container (Flex-item) Properties<\/h2>\n\n\n\n
order<\/h3>\n\n\n\n
Typically, the order of the containers in a parent component will follow how they are laid out in the HTML file. However, if you would like to control the order of the containers \u2013<\/strong> for instance, if you want to highlight another child container first when you are on a mobile device \u2013<\/strong> you can do that by using the order property. The property is a numerical value that indicates which order the child containers should go in when being displayed on the screen. <\/p>\n\n\n\n
align-self <\/h3>\n\n\n\n
align-self<\/code> allows for the default alignment or the one set by align-items<\/code> to be overridden. Remember, align-self only works if the parent itself is display: flex<\/code>. The values for align-self<\/code> can be flex-start<\/code>, flex-end<\/code>, baseline or stretch. <\/p>\n\n\n\n