Flexbox Guide

Properties

Many of the properties of flexbox can become a little confusing after just learning it. This can be a guide to help with basic understanding of what it does.

Parent (flex container)

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
gap, row-gap, column-gap

Children (flex items)

order
flex-grow
flex-shrink
flex-basis
flex
align-self
justify-self

Parent Properties

display

This defines a flex container. All children will be a flex item.

.flex-container {
  display: flex;
}

flex-direction

This defines the main axis. This will make the flex items either in rows or columns in either normal or reversed directions.

Values	Description
row	left to right
row-reverse	right to left
column	top to bottom
column-reverse	bottom to top

NOTE:

Default value is row when display: flex is the only flex property in the container.

Setting flex-direction will build items based on their width and height properties. If set lower than the size of the container, a gap will be at the end of the direction.

flex-wrap

Without a wrap property, items will try to be on the same line. Enabling flex-wrap will allow items to move to the next line based on the width.

Values	Description
row	wrap items from top to bottom
wrap-reverse	wrap items from bottom to top
nowrap	all items will be on one line

flex-flow

Shorthand for flex-direction and flex-wrap, which can be used to form a one-line syntax. Default values are row nowrap

.flex-container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;

  /* Same as 
  flex-direction: row-reverse; 
  flex-wrap: wrap-reverse; */
}

justify-content

Defines alignment along the main axis.

Values	Description
flex-start	Items are packed toward the start of the `flex-direction`
flex-end	Items are packed toward the end of the `flex-direction`
start	Items are packed toward the start of the writing-mode direction
end	Items are packed toward the end of the writing-mode direction
left	Items are packed toward the left of the container
right	Items are packed toward the right of the container
center	Items are center along the line
space-between	Items are evenly distributed in the line with the first on the start line and last item on the end line
space-around	Items evenly distributed within the line between and half on the outside
space-evenly	Items will be distributed with same spacing between items and the `start` and `end` of the container

Two additional keywords go along with this property with values : safe and unsafe.

Safe will prevent items from rendering off-screen and unable to be scrolled to.

align-items

Defines behavior along the cross axis, similar to how justify-content works.

Values	Description
stretch	Stretches columns to fill the container, but respect `min-width` and `max-width`; this is the default behavior
flex-start/start/self-start	Items are placed at the start of the cross axis
flex-end/end/self-end	Items are placed at the end of the cross axis
center	Items are placed on the center of the cross axis
baseline	Items are aligned so their baselines align

The safe and unsafe modifiers work here.

align-content

The functions similar to align-items, but only takes effect on multi-line flex containers if flex-wrap is set to either wrap or wrap-reverse.

If flex-wrap is set to nowrap, then align-content will do nothing.

Values	Description
normal	Reflects the default position of the items as if no value was set
flex-start/start	`flex-start` respects `flex-direction`, `start` respects writing-mode direction
flex-end/end	`flex-end` respects `flex-direction`, `start` respects writing-mode direction
center	Items are centered with the flex container
space-between	Items are evenly distributed, first line at the start of the container and the last line at the end of the container
space-around	Items are evenly distributed evenly between each line, and half space at top of first line and bottom of last line
space-evenly	Items are evenly distributed with equal spacing around each line
stretch	Lines are stretched to take up all remaining space with the flex container

The safe and unsafe modifiers work here.

gap, row-gap, column-gap

The gap property is a shorthand use for combining row-gap and column-gap into one line for styling.

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

  /* Same as
  row-gap: 10px;
  column-gap: 20px; */
}

Children Properties

order

This will allow for items to be displayed in a given order.

.flex-item-1 {
  order: 5;
}

flex-grow

An item with a grow of greater than 1 will taken up that much space as the container size is increased.

.flex-item-1 {
  flex-grow: 1;
}

.flex-item-2 {
  flex-grow: 2;
}

In this, .flex-item-2 will grow and fill in twice as much space than .flex-item-1 will.

flex-shrink

The same for flex-shrink, items shrink more if the value is higher than other items.

.flex-item-3 {
  flex-shrink: 1;
}

.flex-item-4 {
  flex-shrink: 2;
}

flex-basis

This defines the default size of an element before the remaining space is distributed.

flex

This is shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters are optional.

The default values are: 0 1 auto.

align-self

This will work just the same as align-items, but only for the child component it is declared.

justify-self

This will work in a similar fashion to justify-content and is for the flex item along.

Blog

Swislok-Dev