Member-only story
CSS: Flexbox Explained
If you have spent any time building web pages in the past several years then you more than likely have utilized Flexbox. There are a ton of configuration options when using Flexbox so I will cover many of them so that you can be a Flexbox pro!
Overview
Web pages in the 1990s and early 2000s utilized row and column layouts inside of a table view like the example below.
This structure was great for showing tables of data and layout out pages with a well defined structure for typical screen sizes. However, with the introduction of mobile phones and the need to display data well on any screen size something new was needed. This is where Flexbox was created, to flexibly show content on unknown screen sizes and allow responsive layout behavior.
Flexbox is direction agnostic and you are able to lay out items vertically, horizontally and reverse order on either direction. It is recommended to use Flexbox for pages or small applications and utilize Grid layout for larger applications that require more structure.
Properties
Flexbox has two categories of properties that you can utilize, those on the container element that wraps the items on your page, and properties for the item itself. Most properties are defined on the container element but if you need to override behavior or customize for specific elements you have that lever to pull.
Container Properties
Below is the full list of container properties that you can use on a container element that wraps other items. I’ll highlight the most used elements and some examples of how to use them.
.container {
display: flex; /* or inline-flex */
flex-direction: row |
row-reverse |
column |
column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: column wrap;
justify-content: flex-start |
flex-end |
center |
space-between |
space-around |
space-evenly |
start |…
