In this tutorial we are going to look at the CSS flexbox property and how we can use this to improve layouts of our websites. The CSS flexbox property is created to be flexible so it can provide you with a more intelligent layout than the older ways of using floats or display: inline-block. The advantage you get by using the flexbox model is that it can provide you with a much greater efficient way of displaying your layouts, alignments or space between the different containers inside the flexbox. The flexbox will make it's children flexible enough in terms of width and height to try and fit the children inside the containing box. This makes responsive layout a lot easier to manage and how they are displayed and resized depending on your screen.
How To Use Flexbox
The basic use of flexbox is to have a parent container defined as flex and the child elements will be the flexible elements in relation to the parent. In the below example we use flexbox to evenly create the margins in the child elements.
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
To create even margin child elements using flex box you first need to define the parent container as flex.
.container
{
display: flex;
}
Next we can set the size of the child elements to anything we want, then using margin of auto flexbox will automatically set the margins of the child elements to fit the size of the parent.
.box
{
width: 200px;
height: 200px;
margin: auto;
}
See the Pen ogzPOX by Paul (@paulund) on CodePen.
Flexbox Parent Properties
Now we are going to look at the different properties you can use with flexbox, there's different types of properties that you can apply to get the different design layouts you want, some go on the container and others go onto the child elements. ### Container Flexbox Properties
Display
As we saw in the above example display properties allows you to define if a div is a flexbox container.
.container
{
display: flex;
}
Flex-direction
Flex-direction allows you to define the direction in which the child elements are going to flow, you have 4 choices.
.container
{
display: flex;
flex-direction: row;
}
- row - left to right
- row-reverse - right to left
- column - top to bottom
- column-reverse - bottom to top
See the Pen ogzPOX by Paul (@paulund) on CodePen.
See the Pen pvEOmZ by Paul (@paulund) on CodePen.
See the Pen ZYpMNV by Paul (@paulund) on CodePen.
See the Pen XJjPwQ by Paul (@paulund) on CodePen.
flex-wrap
By default flexbox will try to fit all child elements on to one line, but changing the flex-wrap setting will allow you to wrap the child elements onto the next line.
.container
{
display: flex;
flex-wrap: nowrap;
}
- nowrap - Single line, left to right
- wrap - Multi line, left to right
- wrap-reverse - Multi line, right to left
See the Pen ByLOgw by Paul (@paulund) on CodePen.
See the Pen emdLwx by Paul (@paulund) on CodePen.
flex-flow
Flex-flow allows you to join the two above properties together, so it's a shorthand way of defining the flex-direction and the flex-wrap.
.container
{
display: flex;
flex-flow: row nowrap;
}
justify-content
Justify-center allows you to define what position inside the container div to place the child elements. You have 5 different options to use with this property.
- flex-start - aligns the items to the start of the container
- flex-end - aligns the items to the end of the container
- center - centers the items
- space-between - items have even margins, first element at the start of the container, last element at the end of the container
- space-around - items aligned with even margins
See the Pen myrzbR by Paul (@paulund) on CodePen.
See the Pen NPROKy by Paul (@paulund) on CodePen.
See the Pen QwKZLr by Paul (@paulund) on CodePen.
See the Pen jEMeNK by Paul (@paulund) on CodePen.
See the Pen yyaRBR by Paul (@paulund) on CodePen.
align-items
Align items allows you to align the items on the vertical axis. You have 5 different options to use on this property.
- flex-start - aligns the items to the top
- flex-end - aligns the items to the bottom
- center - center align the items vertically
- baseline - aligns the items to their baseline
- stretch - Stretch the items to fit the container
See the Pen vEXVOy by Paul (@paulund) on CodePen.
See the Pen GgjYoE by Paul (@paulund) on CodePen.
See the Pen gbwBPx by Paul (@paulund) on CodePen.
See the Pen OPRBMO by Paul (@paulund) on CodePen.
See the Pen pvExgQ by Paul (@paulund) on CodePen.
align-content
Align content and space between the margins when content is moved onto multiple lines, with this property you have 6 options.
- flex-start - Multi lines will be packed to the start of the container
- flex-end - Multi lines will be packed to the end of the container
- center - Multi lines will be packed to the center
- space-between - Multi line will have even spacing in between
- space-around - Multi lines will have even spacing around
- stretch - Multi lines will stretch to take up the remaining space
Flexbox Children Properties
Along with the parent properties you can also add different child properties to change the behaviour of how they react inside the parent container.
order
By default the child element will be in the same order as they are place in the DOM, but using the order property you can change the order of the boxes.
.box:nth-child(1)
{
order:2;
}
.box:nth-child(2)
{
order:3;
}
.box:nth-child(1)
{
order:1;
}
See the Pen bNBbBv by Paul (@paulund) on CodePen.
flex-grow
By default all the items in the flexbox will try to be place at the same width, using the flex-grow property you can make a certain item to grow in proportion to the other elements. For example if you have all items to start with a flex-grow of 1 then set one item to be flex-grow 2 then this will be double the size as the other items.
.box
{
background: red;
color: white;
font-size: 60px;
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
margin: auto 10px;
flex-grow:1;
}
.box:nth-child(1)
{
flex-grow:3;
}
See the Pen GgNKrv by Paul (@paulund) on CodePen.
flex-shrink
Flex Shrink works in a similar way to grow but it defines if an element is allowed to shrink. ## Real World Examples
The above just goes the theory of the different flex box properties used in different combinations you can create some useful layouts in your website. So lets have a look at some of the real world examples you can use the flex box system and how it will improve your CSS and the responsive design.
Navigation Menu
A navigation menu is something that every website uses, when you create a navigation menu there are a few things that flexbox can help with. It makes it very easy to create navigation items of the space size, with even spacing between the items. The main advantage you get with flexbox is the way it reacts to responsive layouts, when the screen is resized you can see how flexbox changes the width of the margin to fit the parent container. It's basically using percentage value in relation to it's parent, making it very easy to adapt to the screen size.
This makes it very easy to go full width on responsive devices just by changing the way that the flexbox reacts. See the Pen MYbgrd by Paul (@paulund) on CodePen.
Look at the above demo and see how it reacts to different screen sizes, below is the HTML and CSS used to easily create a responsive navigation menu using flexbox.
<nav class="site-navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Products</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
.site-navigation ul {
background: #eee;
list-style: none;
margin: 0;
padding: 0;
/**
* Flexbox properties
*/
display: flex;
justify-content: space-around;
}
.site-navigation a {
color: #333;
display: block;
text-decoration: none;
text-align: center;
padding: 1rem;
}
.site-navigation a:hover {
background: #d4d4d4;
}
@media all and (max-width: 600px) {
.site-navigation ul {
/**
* Full width navigation items
*/
flex-flow: column wrap;
padding: 0;
}
}
Equal Length Columns
Equal length columns is something that has always been tricky when working with float layouts. If you have a main content column and a sidebar column you can get to the situation where your main content column becomes larger than your sidebar column which can cause design problems if you have a background colour on the sidebar. Here is an old tutorial I wrote about how you can get equal column sizes using older techniques.
Equal Height Columns Now view below the flexbox way of creating equal column lengths. See the Pen PwbYRR by Paul (@paulund) on CodePen.
Below is the HTML and CSS of how you will create this for the demo purposes I have left out the content from the HTML.
<div class="column-container">
<div class="column">
<p></p>
<p></p>
</div>
<div class="column">
<p></p>
</div>
<div class="column">
<p></p>
</div>
</div>
<br></br>
.column-container {
display: flex;
align-items: stretch;
}
<br></br>
.column {
width: 33%;
padding: 2rem;
}
.column:nth-child(1) {
background: red;
}
.column:nth-child(2) {
background: blue;
}
.column:nth-child(3) {
background: green;
}
As you can see from this CSS the only properties you will need to make these equal columns is align-items: stretch; on the parent item.
.column-container {
display: flex;
align-items: stretch;
}
Vertical Centring
Having something that is vertical centered inside it's parent element used to be an annoying task, it has been made easier with the technique of using translate and absolute positioning.
.vertically-align-center-child
{
top: 50%;
transform: translateY(-50%);
}
But using flexbox it makes it even easier and responsive by using 2 flexbox properties, justify-content and align-items. See the Pen yyVBKW by Paul (@paulund) on CodePen.
<div class="vertical-container">
<div class="vertical-content">Look I'm Vertically Aligned</div>
</div>
.vertical-container
{
background:#eee;
height: 500px;
/** make it flex */
display: flex;
/** Vertically center */
align-items: center;
/** Horizontally center */
justify-content: center;
}
.vertical-content
{
background: #FFF;
padding: 3rem;
width: 20%;
text-align: center;
}
Reorder Page Items With Media Queries
If you have a page layout with a header, left sidebar, content, right sidebar and footer. When most developers who make this site responsive on a mobile will make all the sections of the website full width. If we did this then the left sidebar will appear above the content section which isn't very good for your visitors. A benefit of using flexbox is that we can actually change the order of the different sections using CSS, so in media queries we can change the order of the content to be pushed into 1st position and place the sidebars under the content. To change the order of the child items you just have to add a CSS property of order to the element and select what position you want this content to appear.
@media only screen and (max-width: 320px)
{
.site-header
{
order: 2;
}
.main-content
{
order: 1;
width: 100%;
}
.left-sidebar
{
order: 4;
width: 100%;
}
.right-sidebar
{
order: 3;
width: 100%;
}
.site-footer
{
order: 5;
}
}
This will change the orders to be: - Main Content
- Header
- Right Sidebar
- Left Sidebar
- Footer
View the demo below and resize the browser to see the content area move above the page header. See the Pen xZeqYa by Paul (@paulund) on CodePen.
Browser Support
So can you use flexbox now? Yes according to caniuse.com flexbox is supported by 88.45% of all browsers. - Chrome 21+ supports unprefixed flexbox
- Firefox 22+ supports unprefixed flexbox
- Safari supports -webkit prefix flexbox
- Opera 12.1+ supports unprefixed flexbox
- IE 10 supports -ms prefix flexbox, but IE11 supports unprefixed flexbox.
Flexbox Bugs
There is a Github Project with a list of Flexbox bugs and workarounds of how you can fix them in the time-being until the browser engines have fixed the problems. If you have noticed any problems with Flexbox please contribute to the Github Project, with your problem and workaround. Flexbugs So that's the basics of how to use flexbox, leave comments below with layouts or cool things you've been able to create with flexbox.
Further Reading
For further examples of how you can use flexbox please read the following articles. - Flexbox Playground