Flex layout

flex Layout / Elastic layout / Expansion box

use flex Layout elements , be called Flex Containers （flex container）, abbreviation " Containers ". All its child elements automatically become container members , be called Flex project （flex item）, abbreviation " project ".

Container attribute ：
flex-dircetion ( Change the spindle arrangement direction )
flex-wrap ( Line break )
flex-flow（flex-direction and flex-wrap Abbreviation for property ）
justify-content（ Set spindle alignment ）
align-items ( Set the alignment of the cross axes )
align-content ( Set multiline alignment )

Elastic element properties ：
order ( Control the order of elements , The smaller the value, the higher the value , The default is 0
flex-grow（ Decide whether to enlarge the project when there is space left , The default is 0）
flex-shrink（ Decide whether to shrink when the project space is insufficient , The default is 1）
flex-basis（ Sets the width of the elastic element basis Priority ratio width high ）
align-self（ Set the cross axis alignment of the elastic element itself ）
flex（flex-grow and flex-shrink and flex-basis Abbreviation The default value flex：0 1 auto）

Horizontal center

1. display:flex justify-content:center align-items:center
2. display:grid justify-content:center align-items:center
3. display:flex Subelement margin:auto

Container attribute

The elastic elements are arranged along the main axis
flex-direction：row( Default ) | row-reverse | column | column-reverse Change the spindle arrangement direction

Line break
flex-wrap: nowrap( Default ) | wrap | wrap-reverse Default no line breaks , If the elastic element exceeds the width of the parent container , Isoproportional compression
flex-flow: row nowrap Default
yes flex-direction and flex-wrap Short form of property

Set spindle alignment
justify-content：flex-start( Default ) | flex-end | center | space-between | space-around | space-evenly
Cross axis alignment
align-items：flex-start | flex-end | center | baseline | stretch( Default )

space-between For left and right alignment , That is, the items on the left and right sides are close to the container , And the distance between items is equal .

space-around The space between items is the space between items on the left and right sides to the container 2 times , A special layout , Not much in daily use .

space-evenly It means that the distance between items is equal to the distance between items and containers , It's equivalent to removing the project width , The remaining width is evenly allocated as the left and right of the project margin.

stretch tile , Default cross axis attribute , If the elastic element height is not set /auto.

Baseline alignment baseline Text alignment

Set multiline alignment
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch( Default )

space-around And justify-content bring into correspondence with , That is, the distance between the items is twice the distance between the items at the upper and lower ends and the container .

space-evenly Empathy , The distance between items is equal to the distance between items and containers ,space-between Keep the upper and lower side items close to the container .

Elastic element properties

Control the order of elements
order: Default 0, The smaller the value, the higher the value

Decide whether to enlarge the project when there is space left
flex-grow： The container will not be occupied by default when there is free space

Decide whether the project will shrink when space is insufficient
flex-shrink The default is 1 Isoproportional compression
flex-basis Default auto, Sets the width of the elastic element basis Priority ratio width high

Take up the rest of the space
flex: Default 0 1 auto,flex The attribute is flex-grow,flex-shrink And flex-basis Shorthand for three attributes

Cross axis alignment
align-self： auto( Default ) | flex-start | flex-end | center | baseline | stretch, Represents the... That inherits the parent container align-items attribute . If there is no parent element , By default stretch.