Front-end HTML/CSS (16)

flex

Spindle, vertical axis

flex-direction

flex-wrap

justify-content

Set how the elastic elements are distributed on the vertical axis

align-items defines the vertical alignment of elastic elements. (Set the position distribution of the elastic element in the current row).

• flex-start, align each elastic element with the start side of the vertical axis of the elastic container.

• flex-end, align each elastic element with the end side of the vertical axis of the elastic container.

• center, the midpoint of the elastic element is aligned with the midpoint of the vertical axis of the row.

• stretch (default): If the item has no height set or set to auto, it will cover the height of the entire container.

note:

1. If the elastic element has an outer margin, then the outer margin of the elastic element will also affect the distribution of the elastic element on the vertical axis.
   

2. If you want to individually modify the alignment of an elastic element, you can set the align-self attribute for the corresponding elastic element.

   self: oneself

   align-self: used on elastic elements.

   • auto, the default value, the alignment mode uses the value of align-items of the flexible container.

   • flex-start, align each elastic element with the start side of the vertical axis of the elastic container.

   • flex-end, align each elastic element with the end side of the vertical axis of the elastic container.

   • center, the midpoint of the elastic element is aligned with the midpoint of the vertical axis of the row.

   • Stretch, if the item is not set to height or set to auto, it will cover the height of the entire container.

Set how to align the entire elastic element.

align-content, treat the entire elastic container as a whole and then align it.

• flex-start: The elastic element is close to the starting edge of the vertical axis.
• flex-end: The elastic element is close to the end edge of the vertical axis.
• center: Take the elastic element as a whole and display it in the center of the vertical axis.
• Space-around, divide the remaining space by the number of rows to get the space that each row should be divided into, and then this space is divided into two and placed on both sides of the row (upper and lower).
• space-between, Place the elastic elements in the first row on the starting edge of the vertical axis, and place the elastic elements in the last row on the end edge of the vertical axis, and then place an equal amount of blank space between each remaining row of elastic elements.
• space-evenly, Calculate the number of rows and add +1 to the current number of rows, and then divide the remaining space into that many pieces. Place a space before each line, and the last one will be placed after the last line.

align-contentIt is invalid for the single-line flexible box model (flex-wrap:wrap is required when used), even if it is a single line (that is, when the width of this line is enough to display all the elements in one line, then if you need to divide the vertical distance equally, you need to Align-content can be used only after adding flex-wrap:wrap)

align-items does not work when align-content is present.

The difference between align-content and align-items is: align-content treats all elements as a whole and then operates, align-items operates on each row.

note:

1. Justify-content How to allocate space in a line.
2. align-items: center; The boxes in a row are centered next to each other.
3. align-content: center; The flexible box as a whole is centered vertically.
4. align-items has no space-between attribute.

Elastic growth factor

flex-grow, applicable to elastic elements (set on sub-elements), is used to define whether the elastic element is allowed to increase when there is excess space, and when it is allowed to increase and there is excess space, it will increase relative to other elastic elements of the same generation What is the ratio of.

Its value is 0 by default, and it can be other numbers or decimals. It cannot be a negative number.

flex-grow: 0; The default is 0, which means that the flex box is not allowed to grow.