This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

The basic concept

A Flex layout element (display: Flex) is called a Flex Container. All of the child elements in the container are called Flex items.

The orientation of the Flex layout is determined by Main Axis and cross Axis. The main axis is determined by the value of Flex-direction (default: right-to-left), and the cross axis is determined by rotating the main axis 90 degrees counterclockwise.

Common properties

Some properties apply only to Flex Container; Some attributes apply only to felx item.

Flex Container

flex-direction

The Flex-direction attribute defines the direction of the main axis, specifying how the internal elements are laid out in the Flex container.

  • row(default) : and the containerdirectionProperty (text orientation).
    • ifdirectionAttributes areltr.rowRepresents a horizontal axis oriented from left to right;
    • ifdirectionAttributes arertl.rowRepresents an axis oriented from right to left.
  • row-reverseAnd:rowOn the contrary
  • column: From top to bottom
  • column-reverse: From bottom to top

flex-wrap

Flex-wrap specifies whether flex elements are displayed in a single line or multiple lines. You can also specify the line stack direction if newlines are allowed.

  • no-wrap(Default) : no line feeds
  • wrap: a newline
  • wrap-reverse: line feed, cross axis occurs reverse (cross-start and cross-end interchange).

justify-content

Autocrate-content defines the distribution of elements along the main axis.

Common attribute values:

  • flex-start: Starts at the beginning of the row
  • flex-end: Starts at the end of the line
  • center: Arranged in the center
  • space-between: Arrange each element evenly, placing the first element at the beginning and the last element at the end
  • space-around: Arrange each element evenly and allocate the same space around each element
  • space-evenly: Arrange each element evenly with equal spacing between each element

align-items

Align-items uniformly sets the inline alignment of all direct child elements along the intersecting axis.

Common attribute values:

  • flex-start: Aligns elements to the starting point of the cross axis
  • flex-end: Elements are aligned to the end point of the cross axis
  • center: Is centered on the cross axis. If the element is higher on the cross axis than its container, the overflow distance is the same in both directions
  • stretch: stretch the dimension along the intersecting axis to be consistent with the container.
  • baseline: Baseline alignment, herebaselineThe default is the first line of text, i.efirst baseline, the child container with the largest distance from the beginning of the cross axis to the element baseline will be tangent to the beginning of the cross axis to determine the baseline.

align-content

Align-content defines the distribution of rows along the intersecting axes.

This property is not valid for a single line elastic box model. (that is, with flex-wrap: nowrap).

The value of the common attribute is the same as that of autocrate-content.

flex-flow

The flex-flow property is short for flex-direction and flex-wrap.

Flex Item

align-self

Align-self, like align-items, defines the inline alignment of elements along the intersecting axes. However, align-self only applies to the current child element and has a higher priority than align-items.

For common attribute values, see align-items.

flex

Flex is short for flex-grow, flex-shrink, and Flex-basis.

  • flex-grow: specifies how the remaining space in the Flex container should be allocated to the project.
  • flex-shrink: specifies how items should be compressed out of space in the Flex container, shrinking only if the sum of the default widths is greater than the container.
  • flex-basis: specifies the initial size of the Flex element in the main axis direction and is setflex-basis(in addition to the value ofauto) andwidth/heightWhen,flex-basisIs preferred.

Note:

  • <'flex-grow'>, the default value is 1. (The initial value is 0)
  • <'flex-shrink'>, the default value is 1. (Initial value: 1)
  • <'flex-basis'>, the default value is 0. (Initial value is Auto)

Possible flex combinations:

order

Order: specifies the order in which items are arranged. The default value is 0. It can be negative.

Old drivers relearn CSS

  • The box model
  • Flex
  • What is BFC & IFC