DEV Community

Swislok-Dev
Swislok-Dev

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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; */
}
Enter fullscreen mode Exit fullscreen mode

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; */
}
Enter fullscreen mode Exit fullscreen mode

back to top


Children Properties

order

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

.flex-item-1 {
  order: 5;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

back to top

Top comments (0)