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 harder to implement.

What is a Flex layout?

Flex is short for Flexible Box, meaning “Flexible Layout” provides maximum flexibility for the Box model. Any container can be specified as a Flex layout.

Elements laid out in Flex are called Flex containers. All of his child elements automatically become container members and are called Flex projects, or projects for short.



Flex layouts make adaptive web pages

By default, the container has two axes: a horizontal main axis and a vertical cross axis. The beginning position of the main axis (where it intersects with the border) is called main start, and the end position is called main end; The starting position of the cross axis is called cross start and the ending position is called cross end.

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

Container attributes

  1. Used to set the direction (down, up, left, right) of the array
  2. Flex-wrap wrap when the content can’t fit
  3. Flex-flow is the abbreviation default value for the flex-direction and flex-wrap properties, row nowrap
  4. Justify -content defines alignment on the main axis.
  5. Align-items define how items are aligned on the cross axes.
  6. Align-content defines the alignment of multiple axes

The flex-direction property has four values:

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

The flex-wrap property has three values:

  • Nowrap: No newlines.
  • Wrap: normal wrap, below the first line.
  • WRAP-REVERSE: A new line, above the first line.

The justify-content attribute has five values:

  • Flex-start (default) : Left aligned
  • Flex-end: Right-aligned
  • Center: a center
  • Space-between: Align both ends
  • Space-around: Equally spaced on both sides of each item.

The align-items property has five values:

  • Flex-start: Align the starting point of the crossover axis.
  • Flex-end: Align the end of the cross axis.
  • Center: Align the center points of the crossover axis.
  • Baseline: The alignment of the first line of text in the project.
  • Stretch (default) : If the project is not set to height or set to AUTO, it will cover the entire height of the container.

The align-content attribute has six values:

  • Flex-start: Align the starting point of the crossover axis.
  • Flex-end: Align the end of the cross axis.
  • Center: Align the center points of the crossover axis.
  • Space-between: Aligned to both ends of the cross axes, evenly spaced between axes.
  • Space-around: Each axis is equally spaced on both sides.

  • Stretch (default) : Axis covers the entire cross axis.

    The project properties

  • Order: Defines the order in which items are sorted. The lower the value, the higher the order. Default is 0.
  • Flex-grow property: Defines the scale of the project. Default is 0
  • Flash-shrink: Defines the size of the project to shrink, which defaults to 1.
  • Flex-basis: Defines the amount of principal axis occupied by the project before the extra space is allocated. The default value is AUTO, which is the original size of the project.
  • Flex: Short for flex-grow, flex-shrink, and flex-basis. Default 0, 1 auto.
  • Align-self: The align-items property allows a single item to be aligned differently from other items and overrides 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 is equivalent to stretch.