This little introduction to CSS Flexbox should help you to get a first impression and give you some examples to play around with. From here you will be able to integrate this powerful framework into your own projects. The Flexible Box Model If you have never used Flexbox before, it can be a bit confusing in the beginning. CSS Flexbox is one way to design responsive layouts with CSS3. Basically, it is the first real possibility to create layouts with CSS, considering that floats were never meant for designing layouts and can only be used with workarounds. It is also called the Flexible Box Model. Basically, it is a layout mode or model, that makes it easier to position elements vertically or horizontally in a container. CSS Flexbox Diagram Flexbox works with a container element — the so-called . With on the container element, the flexbox is activated. flex-container display: flex CSS { : flex;
} .flex-container display And then inside that, we have child elements, called . The flexbox works exactly one level deep. flex-items Within the there are two axes, main-axis and cross-axis of the flexbox. The main-axis runs from left to right by default, the cross-axis from top to bottom. flex-container The Flex Properties There are certain align properties to position our and to change directions, vertically and horizontally. Here you can find some of the main flex properties. flex-items — This goes on that container element. display: flex — Flex-direction row is the default and aligns the flex-items horizontally, while column aligns them vertically. direction — Defines if we want the flex-items to wrap or not. If we make the browser window smaller they will go down to the next line or not. flex-wrap — This assigns a width to each of your flex-items. flex-basis — If we want to align the flex-items to the left, we can say flex-start, the right would be flex-end and we can also center them. justify-content Other Alignments: — This allows the default alignment to be overwritten for individual flex items. align-self — Describes how the flex-items are laid out along the cross axis on the current line. align-items — Make different flex-items in a row different sizes. flex-grow and flex-shrink — This is flex-grow and flex-shrink put together. flex — Changes the order of the flex-items without changing the HTML. order Coding with CSS Flexbox General Set Up HTML 1 2 3 < = > div class "flex-container" < = > div class "flex-item flex-item1" </ > div < = > div class "flex-item flex-item2" </ > div < = > div class "flex-item flex-item3" </ > div </ > div As a set up to start with, I prepared a HTML file with a div called and that wraps three other div’s with the class of , and . flex-container flex-item1 flex-item2 flex-item3 I also added a bit of styling to make our examples a little more visible. There we have , which doesn’t have any styles in it, and we have some empty . flex-container flex-items CSS { : ; : ; : ; : flex;
} { : ; : white; : arial; : ; : solid ; : ; : ; : flex; : center; : center;
} .flex-container background-color #8426d0 padding 15px width 800px display .flex-item background-color #fe8605 color font-family font-size 48px border 1px #8426d0 height 160px width 200px display align-items justify-content Items in a Row Now let’s say that we want these side by side and take up the whole width. So all we have to do is go to the and add display: flex. And you can see that it puts them automatically side by side. By default, the flex-direction property is set to row and it aligns the along the main axis. No floats or anything like that is needed. flex-container flex-items CSS { : flex;
} .flex-container display If you want to change the direction to go vertically instead of horizontally, we could add and bring it back to being a column. flex-direction: column { : flex; : column;
} .flex-container display flex-direction Flexible sizing of Flex Items If we want to be the main column and make it a little wider, we change that to . As you can see it pushes these two over and this is now larger. You can keep on doing this, until you get to a certain number, then it just stops. flex-item1 flex: 2 CSS { : ;
} { : ;
} { : ;
} .flex-item1 flex 2 .flex-item2 flex 1 .flex-item3 flex 1 Ordering Flex Items But what what if we want to be the main column in the middle of the other items? We simple change the order of that. All we would have to do is add to . And to and then to . So now you can see in the middle. flex-item1 order: 2 flex-item1 flex-item2 order: 1 flex-item3 order: 3 flex-item1 CSS { : ; : ;
} { : ; : ;
} { : ; : ;
} .flex-item1 flex 2 order 2 .flex-item2 flex 1 order 1 .flex-item3 flex 1 order 3 CSS Flexbox Alignment: Center Items with with Justify-Content With justify-content we can control the alignment of all elements on the main axis. The justify-content property takes on any of the 5 values below: | f | |  | flex-start lex-end center space-around By default, it is , so that won’t change anything. If we say , that pushes it over. And finally puts it in the centre. flex-start flex-end center But as you can see, this leaves a lot of space on the side. So if we want to put basically margin in the middle of this, so that this can spread all the way across and also have margins in the middle, then we can set it to . This puts the margins in the middle. space-between In contrast to there are no margins on the side. space-around Wrapping Elements with Flexbox For the next example, I add three more items to make it clearer what I want to show. If we look at this on smaller screens like smartphone or tablet, the columns are pushed together. HTML 1 2 3 4 5 6 < = > div class "flex-container" < = > div class "flex-item flex-item1" </ > div < = > div class "flex-item flex-item2" </ > div < = > div class "flex-item flex-item3" </ > div < = > div class "flex-item flex-item4" </ > div < = > div class "flex-item flex-item5" </ > div < = > div class "flex-item flex-item6" </ > div </ > div Now you will probably say, why not simply use media queries around our . But with CSS Flexbox we can create responsive layouts that do not require media queries. With it is determined that the will wrap if there is not enough space available. flex-container flex-wrap flex-items CSS { : flex; : wrap;
} .flex-container display flex-wrap Further Reading — Excellent resource for learning HTML and CSS. MDM Mozilla — Daily articles about CSS, HTML, JavaScript. CSS Tricks — I have been following CSS-tricks and Smashing magazine for quite some time now. Smashing Magazine — A fun game to learn Flexbox. Flexbox Froggy

Mozilla

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Get Started With CSS Flexbox

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps