Writing in the front

The idea of mastering flex layout is to master these four parts:

Flex layout concept, know what flex layout is used for

2. Flex layout structure, what happens when elements become elastic boxes?

Common properties for flex containers and their effects, including structural and layout properties

Common properties for Flex projects and their effects

Flex layout concept

Flex layout is a new layout added to CSS3. Elastic layout provides great flexibility in the layout of box models. When you declare the display value of an element box as flex, the box is an elastic box that acts as a Flex container, and the child elements inside the box become Flex items.

Flex is a one-dimensional layout that moves only one row or column of elements at a time, and can be understood as the queen of chess.

Flex layout structure

Once an element box is declared as an elastic box, it acts as a Flex container with a main axis and a cross axis perpendicular to the main axis, which defaults to a horizontal line, and the cross axis defaults to a perpendicular to the horizontal line. All child elements inside the container default to Flex projects, or projects for short.

Common properties and functions of flex containers

  1. Structural attributes:

  • flex-direction

    flex-direction: row | row-reverse | column | column-reverse

    The flex-direction property changes the direction of the main axis, which defaults to Row (horizontal from left to right).

  • flex-wrap

    flex-wrap: nowrap | wrap | wrap-reverse

    The flex-wrap attribute determines whether the container is single-line or multi-line. The default value is nowRAP, which means that by default (assuming the Flex-direction value is row), Flex items are arranged in a row along the main axis without breaking, and items are automatically shrunk to fit the width of the container on the main axis. If you declare the Flex container to be multi-line, items will not shrink and will be wrapped if the width is insufficient, and each row should be treated as a new Flex container.

    Note that when flex-wrap is wrap-reverse, you can change the direction of the cross axes.

  • flex-flow

    flex-flow: <flex-direction> || <flex-wrap>

    Flex-flow is a shorthand attribute for flex-direction and flex-wrap, which determines the overall structure of a Flex container.

  1. The layout properties:

  • justify-content

    justify-content: flex-start | flex-end | center | space-between | space-around

    Context-content is responsible for arranging Flex items on the main axis. The default value is flex-start, and items are arranged on the main axis without spacing by default.

  • align-items

    align-items: stretch | flex-start | flex-end | center | baseline

    Align-items is responsible for arranging items on the cross axis. The default value is strecth.

    In contrast to the align-content property below, think of the align-items property as meaning that its arranged cross-axis items exist in a single-line Flex container (if the container is multi-line, think of each row as a Flex container).

    Because align-items correspond to a single-line Flex container, it looks a little hard to understand, giving the impression that you are still lining up a line of items. But understand that align-items move items along the cross axis, for example flex-start aligns the top of the item with the start of the cross axis, and Center aligns the center point of the item with the middle point of the cross axis.

  • align-content

    The align-content property is responsible for arranging multiple axes in a multi-line Flex container, so it does not work for a single-line Flex container. The default value is strecth, which means that the Flex container fills the entire container for the layout of items on the cross axis by default, which means that if the items themselves are tall, the Flex container will automatically adjust the distance between items on the cross axis.

Common properties and functions of flex projects

  • order

    The Order attribute determines the order in which Flex items are sorted, which can be interpreted as item weights. The default order value of each item is 0. The higher the order value is, the further the item is in the container. The lower the order value is, the further the item is in the container.

  • flex-grow

    The flex-grow property defines the growth factor of the project along the main axis. That is, the growth ratio of the project when there is free space available along the main axis. The default value is 0, and the project will not grow even if there is free space.

    The concept of a flex-grow scale is understood when multiple projects have flex-grow values:

    Flex-grow defines the ratio of free space allocated by the project. Box 3 allocates twice as much free space as Box 2.

  • flex-shrink

    The Flex-shrink attribute corresponding to flex-grow defines the shrink factor for a project. The default Flex-shrink value for each project is 1, which means that projects shrink proportionally when space is insufficient. This also explains why the default flex-wrap value is not changed. Flex projects can be shrunk dynamically.

    Similar to Flex-grow, when the flex-grow values are different for each project, the shrink values are proportional.

  • flex-basis

    The main axis space occupied by flex projects is called main size, and the cross axis space is called cross size. The browser determines whether there is free space based on the main size of the project. The default values for main size and cross size are the width and height of the project. If you want to change them, you can declare the Flex-basis attribute to change the main size of the project. The default value of flex-basis is auto.

    Setting the flex-basis value does not mean that the box’s size is fixed, just that the box’s main size changes. If the box has a flex-grow or Flex-shrink value, the box size will change as well.

  • flex

    flex: <flex-grow> <flex-shrink> || <flex-basis>

    The compound property of flex-grow,flex-shrink, and flex-basis. The latter two properties are optional. The default value is 0. Normally we don’t define these three properties separately, but only flex properties.

  • align-self

    The align-self attribute allows one item to be arranged differently from other items on the cross axis, with the same optional value as align-items. The default value is auto, which inherits the align-items value of the parent element of the Flex container and overwrites it.