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.
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
justify-content properties to control how the items are displayed.
inline-flex to start using flexbox
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 defines the alignment of the items along the main axis. See the below pen to see some examples.
align-items is responsible for determining items alignment perpendicular to the main axis. See the pen below:
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 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-basis to a size i.e. 200px, 50%, 5rem. This determines the initial size of the item before being sized to fit.
Use this rather than defining the
flex: 1 1 200px;
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.
baseline. This overrides any value defined by
align-items on the container.
There are a lot of concepts to try get you head around so let's take a look at some examples.
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:
No more margin
margin:0 auto; necessary, flexbox can do it now :D
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.