CSS Flexbox: Properties of the Parent Container

In the previous article on CSS Flexbox: Basics, we introduced the Flexbox layout, and we got to understand its importance to modern web development and its bring a lot of flexibility and CSS semantic richness.

Let’s draw our focus to the parent container, which usually looks like this:

CSS Flexbox Container

The parent has a bunch of properties, we will carefully consider each one.


This creates a flex container, its the very property you need to set to switch on the flex layout system. Usually we set this to either inline or block, but now setting it to flex also activates flex behaviour to all children DOM elements.

.container {
  display: flex;
CSS Flexbox Direction

To set the main or cross axis, which also determines the direction in which flex items will be placed, we need to define the flex-direction property. Flex layout follows a single-direction layout system.

.container {
   flex-direction: row | row-reverse | column | column-reverse
CSS Flexbox Wrap

Its important to note that flex items will be placed as much as possible to fit onto one line, to change this behaviour, so that the items wrap, you can set the the flex-wrap property.

.container {
   flex-wrap: nowrap | wrap | wrap-reverse;

As is the norm in CSS to find shorthand notations, the flex-flow is a shorthand for the flex-direction and flex-wrap properties, which fundamentally configure the container’s main and cross axes. Its default value is row nowrap.

.container {
   flex-flow: column wrap;
CSS Flexbox End
CSS Flexbox Center
CSS Flexbox Space Between
CSS Flexbox Space Around
CSS Flexbox Space Evenly

This property is responsible for the distribution and alignment along the main axis, it controls how leftover space is distributed around items and also mitigates when items overflow.

.container {
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

The two extra keywords: safe and unsafe add extra control. Using safe makes sure that that however you do this type of positioning, you don’t push an element such that it renders off-screen preventing the content to be scrolled to.

CSS Flex Align Items

This property is responsible for determining how flex items are laid out on the cross axis.

.container {
   align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
CSS Flexbox align content

This property distributes the space around flex items on the cross axis, it is only visible when you have a multi-line flex container, where flex-wrap is set to either wrap or wrap-reverse.

.container {
   align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
gap, row-gap, column-gap
CSS Flexbox gap 10px
CSS Flexbox gap 30px
CSS Flexbox gap 10px 30px

The gap property is responsible for the space separating flex items, specifically only the spacing between items and not on the edges.

.container {
  display: flex;
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;

Also gap is not only used by flexbox, it is also used in other layouts like the grid and multicolumn layout.

Leave a Reply

Your email address will not be published. Required fields are marked *