Flex layout

1 Layout principle

flex yes flexible Box Abbreviation , Meaning for “ Elastic layout ”, Used to provide maximum flexibility for boxed models , Any container can be specified as flex Layout .

• When we set the parent box to flex After the layout , The child element float、vertical-align The data will become invalid .
• name ： Telescoping layout = Elastic layout = Expansion box layout = Elastic box layout = flex Layout

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

summary : By adding... To the parent box flex attribute , To control the position and arrangement of sub boxes .

2 flex Layout parent common properties

2.1 Common parent properties

• flex-direction： Set the direction of the spindle
• justify-content： Set the arrangement of sub elements on the spindle
• flex-warp： Set whether the child element should wrap
• align-content： Sets the arrangement of child elements on the side axis （ Multiple lines ）
• allign-items： Set the arrangement of child elements on the side axis （ A single ）
• flex-flow： Compound attribute , It's equivalent to setting flex-direction and flexwarp

2.2 flex-direction Set the direction of the spindle

2.2.1 Main shaft and side shaft

• Default spindle direction ：X Axis = level
• Default side axis direction ：Y Axis = Vertical down

Property value	explain
row	The default is left to right
row-reverse	From right to left
column	From top to bottom
column-reverse	From bottom to top

 div {
    
	width: 800px;
    height: 200px;
    background-color: pink;
    /*  Add to parent flex attribute  */
    display: flex;
    /*  The default spindle is  row cross ( Default ),column vertical  */
    flex-direction: column-reverse;
}

div span {
    
    width: 150px;
    height: 100px;
    background-color: yellow;
}

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

2.3 justify-content Set the arrangement of sub elements on the spindle

justify-content Property defines the alignment of the item on the spindle

Be careful ： Before using this property, be sure to determine which spindle is

Property value	explain
flex-start	The default value is From the head If the spindle is x Axis , From left to right
flex-end	From the tail
center	Center the spindle （ If it is x Axis , Then the level is in the middle ）
space-around	Divide the remaining space equally
space-between	We'll stick the edges on both sides first , Divide the rest of the space equally （ important ）

div {
    
	width: 800px;
    height: 200px;
    background-color: pink;
    /*  Add to parent flex attribute  */
    display: flex;
    /*  The default spindle is  row cross ( Default ),column vertical  */
    flex-direction: column-reverse;
    /* justify-content  Set the arrangement of sub elements on the spindle  */
    justify-content: center;
}

2.4 flex-warp Set whether the child element should wrap

By default , The projects are all in one line （ also called ：“ axis ”） On .
Definition ：flex By default, the layout does not wrap .

If there are too many elements , Will shrink the width of the child element , Put it in the parent element .

Property value	explain
nowrap	The default value is , Don't wrap
wrap	Line break

2.5 align-items Set the arrangement of child elements on the side axis （ A single ）

This attribute controls the child on the side axis （ Default y Axis ） The arrangement on the , Use... When the sub item is a single item .

Property value	explain
flex-start	The default value is From top to bottom
flex-end	From bottom to top
center	Huddled together in the middle （ Vertical center ）
stretch	The tensile （ Don't give height to the sub box ）

2.6 align-content Set the arrangement of the child elements on the side axis （ Multiple lines ）

Set the arrangement of children on the side axis , And can only be used for child items Line break The situation of （ Multiple lines ）

Property value	explain
flex-start	The default value is arranged at the head of the side axis
flex-end	Start at the end of the side axis
center	In the middle of the side shaft
space-around	Children divide the remaining space equally on the side axis
space-between	The subitems are distributed first on the side axis and then on both ends , In bisecting the remaining space
strech	Sets the height of the child element and bisects the height of the element

div {
    
    width: 800px;
    height: 300px;
    background-color: pink;
    display: flex;
    /*  Line break  */
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

div span {
    
    width: 150px;
    height: 100px;
    background-color: yellow;
    margin: 10px;
}

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>

2.6 align-content and align-items difference

• align-items It is suitable for single line , Only top alignment 、 Lower alignment 、 Center and stretch
• align-content Adapt to line breaks （ Multiple lines ） Under the circumstances （ Invalid in single line case ）, You can set the upper alignment 、 Lower alignment 、 In the middle 、 Attribute values such as lifting and average allocation of remaining space .

2.7 flex-flow

flex-flow The attribute is flex-direction and flex-wrap Composite properties of properties .

for example ： Set the spindle and line feed （ Transposition ）

flex-direction: column;
flex-wrap: wrap;

or

flex-flow: column wrap;

3 flex Common properties of layout subitems

3.1 flex attribute

Define subprojects, allocate remaining space , use flex To show how many copies .

.item {
    
	flex: <number>;		/* default 0 */
}

for example ： Fixed left and right , The middle takes up all the remaining space

section {
    
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}

section div:nth-child(1) {
    
    width: 100px;
    height: 150px;
    background-color: red;
}

section div:nth-child(2) {
    
    flex: 1;
    background-color: yellow;
}

section div:nth-child(3) {
    
    width: 100px;
    height: 150px;
    background-color: blue;
}

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

The three boxes are equally divided into three parts

section {
    
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}

section div{
    
    flex: 1;
    text-align: center;
}

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

4.2 align-self Controls how children are arranged on the side axis

align-self Property allows a single item to have a different alignment than other items , covering align-items attribute .

The default value is auto, That represents the parent element of the integration align-items attribute , If there is no parent element , Is equivalent to stretch

section {
    
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}

section div {
    
    flex: 1;
    text-align: center;
}

section div:nth-child(3) {
    
    /*  Align yourself to a position  */
    align-self: flex-end;
    background-color: yellow;
}

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

4.3 order Property defines the order in which items are arranged

The smaller the numerical , The further up the line , The default is 0

Be careful ： and z-index Dissimilarity

section div:nth-child(3) {
    
    flex: 1;
    order:-1;
}

Reference address ：https://www.bilibili.com/video/BV1N54y1i7dG