What is flex layout

Flex is short for Flexible Box, which stands for "Flexible layout" and is designed to provide maximum flexibility for boxed models. Through the display: flex; To implement.Copy the code

The basic concept

Elements with a Flex layout are called Flex containers, or containers for short. All of its child elements automatically become container members and become Flex items, or "items."Copy the code

Properties of the Flex container

1. flex-direction

Four values are as follows: row (default value) : the main axis is horizontal and the starting point is on the left. Row-reverse: the main axis is horizontal and the starting point is on the right. Column: The main axis is vertical and the starting point is on the topCopy the code

2. flex-wrap

Three values: nowrap (default) : no line wrap: a line wrap with the first line above wrap-reverse: a line wrap with the first line belowCopy the code

3. flex-flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default is row nowrap.Copy the code

4. justify-content

The justify-content attribute defines the alignment of items on the main axis with five values: flex-start (default) : left-justify Flex-end: right-justify center: Space-around: the space between the two sides of each item is equal. As a result, the spacing between items is twice as large as the spacing between items and the border.Copy the code

5. align-items

The align-items property defines how items are aligned on the cross axis. Baseline: baseline alignment of the first line of the project. Baseline: baseline alignment of the first line of the project. Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.Copy the code

6. align-content

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. Six values: flex-start: aligns with the starting point of the cross axis. Flex-end: aligns with the end of the cross axis. Center: aligns with the midpoint of the intersecting axis. Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes. Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders. Stretch (default) : Axis takes up the entire cross axis.Copy the code