Introduction to flex flexible boxes in CSS

Today mainly from his several properties to introduce the elastic box

Display:flex; Set the element as an elastic container

1.flex-direction: You can change the direction of the Flex container to let its child elements flex the layout of the row define the spindle direction for the x-axis from left to right Row-reverse right-to-left column defines the spindle direction for the y-axis from top to bottom

2.justify-content the arrangement so that its child elements are arranged in different ways Flex-start: Starting at the beginning of the line. Flex-end: Arranges the center from the end of the line: The elements are arranged at the midpoint of each line. Space-between: Evenly distributes the elastic elements on each line. The distance between adjacent elements is the same. The first element of each row is aligned with the beginning of the line, and the last element of each line is aligned with the end of the line. Space-around: Evenly distributes the elastic elements on each line. The distance between adjacent elements is the same. The distance from the first element of each row to the beginning of the line and the last element of each line to the end of the line will be half the distance between adjacent elements.

3.flex-wrap the element that is used to set the line Nowrap:flex is placed on a row Wrap:flex the element is larger than the entire parent, and the other row is arranged Wrap-reverse: As with Wrap's behavior, But it will be opposite to the original direction. 4.align-items: Alignment of flexible boxes

Baseline set the text to it. If the baseline is set to its