Flexible layout (display:flex;) Attribute details

Link to the original text ：https://www.cnblogs.com/hellocd/p/10443237.html

Elastic layout （display:flex;） Properties,

Flexbox  yes flexible box For short （ notes ： intend “ Flexible box container ”）, yes  CSS3  New layout mode introduced . It determines how elements are arranged on the page , So that they can be displayed predictably under different screen sizes and devices .

It's called Flexbox , Because it can expand and shrink flex Elements in container , To maximize the available space . Same layout as before （ Such as table Layout and floating elements, inline block elements ） comparison ,Flexbox Is a more powerful way ：

• Arrange elements in different directions
• Rearrange the display order of elements
• Change the alignment of elements
• Dynamically loading elements into containers

One 、 Basic concepts

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

stay Flexbox In the model , There are three core concepts ：
– flex term （ notes ： Also known as flex Subelement ）, Elements that need layout
– flex Containers , It contains flex term
– Arrange the direction （direction）, To determine the flex The layout direction of the item

Two 、 Container attribute

2.1  flex-direction:

• row（ The default value is ）： The principal axis is horizontal , The starting point is on the left .
• row-reverse： The principal axis is horizontal , The starting point is on the right .
• column： The principal axis is perpendicular , The starting point is at the top .
• column-reverse： The principal axis is perpendicular , Starting edge .

2.2   flex-wrap:

• nowrap（ Default ）： Don't wrap .
• wrap： Line break , The first row is at the top .
• wrap-reverse： Line break , The first row is at the bottom .

2.3  justify-content:

• flex-start（ The default value is ）： Align left
• flex-end： Right alignment
• center： In the middle
• space-between： full-justified , The intervals between the items are all equal .
• space-around： The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .

2.4  align-items:

• flex-start： Align the starting points of the intersecting axes .
• flex-end： The ends of the intersecting axes are aligned .
• center： Align the midpoint of the intersecting axis .
• baseline: Baseline alignment of the first line of text for the project .
• stretch（ The default value is ）： If the project is not set to height or set to auto, Will fill the entire container .

2.5  align-content:

Defines the alignment of multiple axes , If the project has only one axis , Then this property will not work

• flex-start： Align with the starting point of the intersecting axis .
• flex-end： Align with the end of the cross axis .
• center： Align with the midpoint of the intersecting axis .
• space-between： Align with both ends of the cross axis , The average distribution of spacing between axes .
• space-around： The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .
• stretch（ The default value is ）： The axis occupies the entire cross axis .
  

combination  justify-content and align-items, Look at the  flex-direction  Under the action of two different attribute values , What's the difference ：

3、 ... and 、 Item attribute

3.1 order attribute

3.2 flex-grow attribute

flex-grow Attribute defines the magnification of the item , The default is 0, That is, if there is any remaining space , And don't zoom in .

If all of the items flex-grow Attributes are 1, Then they will divide the remaining space equally （ If any ）. If a project flex-grow The attribute is 2, Everything else 1, Then the former will occupy twice as much space as the others .

3.3 flex-shrink attribute

flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink .

.item {
  flex-shrink: <number>; /* default 1 */
}

If all of the items flex-shrink Attributes are 1, When space runs out , I'm going to scale it down . If a project flex-shrink The attribute is 0, Everything else 1, When there is not enough space , The former does not shrink .

Negative values are not valid for this property .

3.4 align-self attribute

align-self Property allows a single item to have a different alignment than other items , covering align-items attribute . The default value is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Elastic layout does not change the width of the project by default , But it changes the height of the project by default . If the project does not explicitly specify the height , It will occupy all the height of the container .

Reference resources ：http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html