Flexbox is a CSS layout module. Flexbox allows elements in a container to be responsively arranged depending on the size of the container. Flexbox gives a container the ability to alter its items dimensions in order to best fit in the available space. A container with flexbox applied can expand or shrink its child items depending on which is most appropriate.
With flexbox you can:
- align content horizontally or vertically
- reorder content
- adjust the spacing between content
- wrap content to the next line as the screen gets smaller
Flex container
The flex container is the parent element that holds all flex items. To assign flexblox to an element, we can use the display property with a value of flex.
div {
display: flex;
}Flex item
Any direct child element held within the flex container is considered a flex item. We can add further CSS properties to the flex container to adjust the alignment and position of the flex items.
div {
display: flex;
justify-content:space-evenly
}Flexbox demonstration
Let’s have a look at Flexbox in action. In these videos, I show how you create a flex container by adding flex to the display property of a div. We then manipulate the position and alignment of flex items by adding further properties. There are a bunch of different properties that you can use for different purposes, I’ve included some resources below.
Fork this Codepen to follow along with the demonstration.
Further resources
There are heaps of really great resources and references for flexbox on the internet. These are a couple that I keep going back to:
From CSS-Tricks, A Complete Guide to Flexbox is excellent and you probably don’t need anything else.
Freecodecamp has some really good challenges that will help reinforce your knowledge. There is also a super article with animated gifs on Freecodecamp that is worth a read.
Flexbox Froggy is a really neat gamified tool to help learn how flexbox properties work. Definitely worth investing some time in.
