Skip to content
Search

CSS:flexbox

lastmod 2025-09-24created 2019-01-1657 edits

flexbox is a one-dimensional layout method for laying out groups of items in rows or columns. Items shrink to fit into smaller spaces or flex to fill extra space.

Container / Item (Box)

Flex properties include properties applied to the container that wraps the boxes, and properties applied to individual boxes.

Properties applied to the Container

Properties applied to the Box

flex

The flex CSS property sets how a flex item will grow or shrink to fit the space its container takes up.

It is a shorthand property for #flex-grow, #flex-shrink, and #flex-basis.

flex-direction

Depending on the column or row value, #align-content, #justify-content, #align-items, and #align-self all behave differently.

In the Chrome debugging tools, after selecting the Elements tab and the Styles section, a button for checking the detailed properties below is added where display: flex; is set.

row

Css-flex-direction-row.png

column

Css-flex-direction-column.png

justify-content

justify-content example

Controls the alignment and spacing of flex items along the "main axis (direction of flow)".

flex-start (default)
Justify-content_flex-start.png
Flex items are packed toward the start of the line.
flex-end
Justify-content_flex-end.png
Flex items are packed toward the end of the line.
center
Justify-content_center.png
Flex items are packed toward the center of the line.
space-between
Justify-content_space-between.png
Flex items are evenly spaced, with the first item aligned to one edge of the container and the last item aligned to the opposite edge.
The edges used for the first and last items depend on #flex-direction and CSS:direction (direction: ltr or direction: rtl).
space-around
Justify-content_space-around.png
Same as space-between, except for half-size spaces at both ends.
space-evenly
Still being implemented?

Auto Margin

Using auto margins (margin: auto), you can center flex items, space them apart, or group them into subgroups.

Unlike #justify-content, which is applied to the flex container, auto margins are applied to flex items.

They work by consuming all free space in the specified direction.

Another way is to set #flex-grow to 1 only on the flex-item where the space is needed, to claim the space.

align-items

align-items example

Controls the alignment of flex items along the "perpendicular axis (cross axis)".

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch (default)

align-content

align-content example

Controls the "multi-line cross axis" alignment of flex items and the spacing between lines.

It applies only when there are multiple lines, that is, only with flex-wrap: wrap,

and when there are multiple lines, it takes precedence over the cross-axis alignment of #align-items.

This property determines the vertical alignment when the items span two or more rows.

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

align-self

flex-grow

The flex-grow CSS property declares how much of the available space inside the flex-container element a flex-item element can take.

flex-grow is usually used together with the #flex-shrink and #flex-basis properties. And generally, the shorthand #flex property is used to ensure all values are set.

The following is the class applied to vuetify's v-spacer. 

.spacer {
    flex-grow: 1 !important;
}

flex-shrink

A property that sets the flex-shrink value of a flex-item element. The flex-shrink property is used when the size of the flex-item elements is larger than the size of the flex-container element, and the flex-item elements shrink inside the flex-container element according to the number set.

flex-grow vs flex-shrink

flex-basis

The flex-basis CSS property sets the initial size of a flex item. Unless box-sizing is set otherwise, it changes the size of the content box.

inline-flex

In responsive layouts, it also affects the container's child elements

Inline-flex_example.gif

gap

Adjusts the spacing between items. 

div {
  display: flex:
  gap: 10px 5px;
}

Why there are no justify-items and justify-self properties

The author says:

Because they are not needed.

Examples 

.flex-container {
  display: flex;
  flex-direction: row;
}

See also

Favorite site

Online game

References

  1. WIT_-NTS_UIT_Blog-_flexbox_10_layout_example.pdf ↩

  2. This_time_lets_learn_CSS_Flex_-_studiomeal.pdf ↩

author Zer0 sitemap