Flexbox
Flexbox
Since we have gotten rid of IE9 (HOORAY!!!) we can start to use some new CSS functionality. The first one I want to show you is flexbox. Using flexbox we can create really responsive layouts that easily fill empty space that normally would of required some form of hack to fix. Remember those days when you used to use floats and tables to get the layout you wanted? Well now you can use flexbox.
Flexbox Container
If you want items to be displayed using flexbox then understanding how to set up the container is very important. The container is the parent of the items you want to display using flexbox. The container is the element you set display:flex;
on to let the browser know how to render it. It's here you also define the flex-direction
, align-items
and justify-content
properties to control how the items are displayed.
display
Set display
to flex
or inline-flex
to start using flexbox
flex-direction
Set flex-direction
to row
, column
, row-reverse
or column-reverse
to tell the browser what direction you want the main axis of the flex to occur. row
runs left to right, column
runs top to bottom.
justify-content
Set justify-content
to flex-start
, flex-end
, center
, space-between
or space-around
. justify-content
defines the alignment of the items along the main axis. See the below pen to see some examples.
align-items
Set align-items
to flex-start
, flex-end
, center
, stretch
or baseline
. align-items
is responsible for determining items alignment perpendicular to the main axis. See the pen below:
Items
Now you have seen how to set up the container it's time to look at the items and see the different ways you can manipulate the items.
flex-grow
Set flex-grow
to a positive integer. This is a factor by which the items grow to fill the space. Items with flex-grow:1;
will be half the size of items with flex-grow:2;
.
flex-basis
Set flex-basis
to a size i.e. 200px, 50%, 5rem. This determines the initial size of the item before being sized to fit.
flex
Use this rather than defining the flex-grow
, flex-shrink
and flex-basis
separately.
css
.item{
flex: 1 1 200px;
}
order
Set order
to an integer. This determines where in the flexbox the item appears. The smaller the number the closer to the start the items appears.
align-self
Set align-self
to flex-start
, flex-end
, center
, stretch
or baseline
. This overrides any value defined by align-items
on the container.
Examples
There are a lot of concepts to try get you head around so let's take a look at some examples.
Flexible middle
Say you have a fixed size container and you want a header and a footer to always be at the top and bottom respectively. Now you want the remaining container space to be filled by the content. Usually you would end up doing something with position:absolute;
or pull out some table-cell
wizardry to get the job done. Well check out this pen:
Note the use of flex:none;
on the two fixed size elements, that is very important.
Lining up text with an icon
This used to be a bit of a pain, check out these few examples:
Always centered
No more margin margin:0 auto;
necessary, flexbox can do it now :D
Conclusion
Hopefully these few examples will give you some inspiration as to how useful flexbox is and inspire you to start dabbling in it yourself. Any examples you want to see added? Feel free to ask.
Rik