Skip to content

css-flexbox.md

Latest commit

 

History

History
78 lines (45 loc) · 5.74 KB

css-flexbox.md

File metadata and controls

78 lines (45 loc) · 5.74 KB

CSS Flexbox

Flexbox was designed as a one-dimensional layout model, i.e. rows or columns.

Think in terms of two axes: main axis and cross axis

Main axis is defined by the flex-direction property. The cross axis runs perpendicular to it.

flex-direction has four possible values:

  • row: items are laid out in a line
  • row-reverse: like row, but reversed
  • column: items are laid out in a column
  • column-reverse: like column, but reversed

To create a "flex container" use display: flex (or inline-flex). All immediate children will be "flex items".

By default flex items will display in a row, from the start edge of the main axis, they will not stretch but will shrink, and won't wrap into multiple lines.

Set flex-wrap to wrap, on the flex container, to cause flex items to wrap into multiple lines.

flex-flow is a shorthand for flex-direction and flex-wrap.

To have more control over flex items we use:

  • flex-grow: the flex grow factor of a flex item
  • flex-shrink: the flex shrink factor of a flex item
  • flex-basis: the value the item is using as their base value to grow and shrink from

flex-basis: auto makes it so items will use either their explicit width, or the (implicit) width of their content.

Giving flex-grow a positive value means the item can grow.

flex-grow: 0; makes it so items will not grow larger than their flex-basis size.

Giving flex-shrink a positive value the items can shrink smaller than their flex-basis, but only if their total values overflow the main axis.

flex-shrink: 1 makes it so items can shrink if they need to rather than overflowing.

The flex shorthand sets flex-grow, flex-shrink, and flex-basis in that order.

flex: initial is the default for flex items, and the same as flex: 0 1 auto.

flex: auto is equivalent to flex: 1 1 auto.

flex: none is equivalent to flex: 0 0 auto.

flex: 1 is equivalent to flex: 1 1 0.

Tip: Specify all the values to the flex shorthand to avoid confusion and bugs.

justify-content controls alignment of items on the main axis. Initial value is flex-start

align-items controls alignment of items on the cross axis. Initial value is stretch.

align-content controls space between flex lines (i.e. when wrapped) on the cross axis.

align-self controls alignment of an individual flex item on the cross axis.

There are no individual alignment properties (e.g. justify-items or justify-self) on the main axis as those items are treated as a group. However, it is possible to do individual alignment using auto margins (e.g. margin-left: auto).

You can target individual items and change where they appear in the UI with the order property.

Items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.

Negative values are accepted. Flex items have a default order value of 0.

Tip: In general, avoid -reverse values in flex-direction/flex-flow, and using the order property as they create a mismatch between the HTML and the visual output, and thus, accessibility issues.

Links