In the past, making complex web page layouts with CSS been a real big pain. A part of the spec that is recently gaining more and more browser support is the flexible box layout or flexbox. Flexbox is a way to make layouts that just weren’t possible in CSS before. In general, a flexbox is a type of container that can automatically position and resize its children elements based on some rules.
There’s a couple of basic rules you can apply. For example you want this child to expand and fill as much space as possible next to its siblings. Or you can say all children of the flexbox must have equal space between them. Or maybe you have one child and it should be right in the middle of the container, regardless of whatever text it contains.
In the past there were a few different hacks you could do to try and position these kind of things but they all had some kind of caveat.
This is becoming more of a problem today where we want web pages to act like mobile apps with a fixed viewport.
At work I needed to position some divs in certain ways that would react to the height of the screen. As you probably know, there are many different sizes of mobile screens out there! So I had to find a solution that looked good on all of them.
The first layout I wanted was where I had three elements and they should be equidistant to each other and the edge of their container. The way to do this is the use the CSS property justify-content: space-around on the flex container. This positions all the elements so that they have the same amount of space around themselves.
But it wasn’t quite what I wanted, if you look closely, the gaps between the elements have double the amount of space than the gaps between the edges elements and container.
The trick I found is to actually use justify-content: space-between. This is an image of what space-between does.
To then create the space around the edges we can insert zero size divs as the first and last elements. This means that the space at the edges is actually space inbetween an empty div and our content, you just don’t see the empty div. This space will now automatically grow to the correct size.
Below is an image of what happens when you add these zero size divs. It is an animated gif to show it reacting to the container changing size.
At first I thought it was weird to require empty divs to make it work, but then I realised that this way is more general and gives you more flexibility. For example I could have instead wanted the first element to be twenty pixels from the top but everything else is equidistant. I could do that by removing the empty div and adding a padding to the top of the container.
You can see the code for the animated gif here.
The second layout is a little bit different to the first. We wanted the following three elements, an image that sat directly in the middle of the page, a footer that stuck to the bottom of the page, and another image that was exactly between the two. Below is an example in gif form.
For this layout you have to think about it differently and you have to use another container. Here I use flex: 1 on two containers, what this does is expands the elements as much as possible based on a weighting of 1.
<div class="container">
<div style="flex: 1"></div>
<div class="example-image"></div>
<div style="flex: 1"></div>
</div>This just centres an element in its container but allows you to put other elements in the gaps between.
The next thing to do is to put the remaining two divs inside the bottom container using justify-content: space-between again, and only adding the empty div to the top.
You can see it clearer below when I darken the flex: 1 containers.
Finally, here is the code if you want to play around with it.
I hope this has been an interesting demonstration of a couple of different things you can build with the basic rules of flexbox.
I’m really happy that flexbox is a thing now, as it makes responsive UIs a lot easier to make.
I would also like to mention that the flexbox model is not just for HTML. Facebook has developed a JavaScript flexbox implementation that can be used in the recently open sourced React Native and also in canvas-style game UIs.
Finally if you want to learn more about flexbox layouts you can check out Solved by Flexbox