Web layout is a key application of CSS. Traditional layouts rely on display, position, and float properties, but special layouts, such as vertical center, are difficult to implement.

What is the Flex layout?

Flex is short for Flexible Box, which stands for “Flexible layout” to provide maximum flexibility for a Box model. Any container can be specified as a Flex layout.

Elements with a Flex layout are called Flex containers. All of its child elements automatically become container members and are called Flex projects, or projects for short.

The Flex layout authoring adaptive web container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Container properties

  1. Flex-direction Sets the alignment direction (down, up, left, right)
  2. Flex-wrap is used to wrap a line when the content cannot fit
  3. Flex-flow is the default value row nowrap for the flex-direction and flex-wrap properties
  4. Context-content defines the alignment on the main axis.
  5. Align-items defines how items are aligned on the cross axis.
  6. Align-content defines the alignment of multiple axes

The flex-direction attribute has four values:

  • Row (default) : horizontal, left to right, starting on the left.
  • Row-reverse: horizontal, right-to-left, starting at the right.
  • Column: vertical direction from top to bottom.
  • Column-reverse: indicates the vertical direction from bottom to top.

The flex-wrap attribute has three values:

  • Nowrap: No line breaks.
  • Wrap: Normal line wrap, below the first line.
  • Wrap-reverse: newline, above the first line.

The implement-content attribute has five values:

  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: aligns both ends
  • Space-around: Equal spacing on both sides of each item.

The align-items property has five values:

  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: Cross axis end alignment.
  • Center: aligns the midpoints of the cross axes.
  • Baseline: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height of the project is not set or auto is set, it will occupy the entire height of the container.

The align-content attribute has six values:

  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: Cross axis end alignment.
  • Center: aligns the midpoints of the cross axes.
  • Space-between: aligns with both ends of the intersecting axes, and the spacing between axes is evenly distributed.
  • Space-around: Each axis is equally spaced on both sides.
  • Stretch (default) : Axis takes up the entire cross axis.

The project properties

  • Order: Defines the order of items. The smaller the value, the higher the order. Default is 0.
  • Flex-grow property: Defines the scale of the project. Default is 0
  • Flex-shrink: Defines the size of the project. Default is 1.
  • Flex-basis: Defines the principal axis space that the project occupies before allocating extra space. The default value is auto, which is the original size of the project.
  • Flex: short for flex-grow, flex-shrink, and flex-basis. The default value is 0. 1 Auto.
  • Align-self: Property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.