Know flex box

High quality resource sharing

Learning route guidance （ Click unlock ）	Knowledge orientation	Crowd positioning
🧡 Python Actual wechat ordering applet 🧡	Progressive class	This course is python flask+ Perfect combination of wechat applet , From the deployment of Tencent to the launch of the project , Create a full stack ordering system .
Python Quantitative trading practice	beginner	Take you hand in hand to create an easy to expand 、 More secure 、 More efficient quantitative trading system

Know the elastic box flex

source ：https://blog.xybin.top/2022/flex

1、 Define elastic layout （ Defined on parent ）display:flex;
If the kernel is webkit Must be preceded by -webkit-flex

2、 After setting up the elastic layout , The child element css Medium float, clear, vertical-align These properties will be invalidated .

3、 Can be flex The flexible layout is regarded as a big box , That is, a big container , Just define it as display:flex; That is, all child elements in it will automatically become members of the container , In technical terms, it's called project

4、 By default , Items are arranged horizontally in the container , That is, arrange according to the main axis , And it is clockwise . Need to be （1,2,3） That is to say x Axis direction .（ The default is flex-direction:row; ）

<div class="box">
<div class="boxone"> first div>
<div class="boxtwo"> the second div>
<div class="boxthree"> Third div>
div>

css style ：

.box{
width: 500px;
height:400px;
background: pink;
display: flex;
}
.boxone{
width: 100px;
height:200px;
background: red;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}

Example ：

first
the second
Third

5、 If it is necessary to arrange it in reverse （3,2,1） array , You need to use flex-direction:row-reverse;( And all of us float:right; It's the same effect )

.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:row-reverse;
}

Example ：

first
the second
Third

source ：https://blog.xybin.top/2022/flex

6、 In addition to arranging in the direction of the main axis , And according to y Arranged in the axial direction .
add flex-direction:column;

.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:column;
}

Example ：

first
the second
Third

7、 Empathy ,y Arrange in reverse order along the axis ：flex-direction:column-reverse;

Example ：

first
the second
Third

、
8、 When we have too many items in the container . At this time, we will find . These projects are all crowded together . The width of the project itself doesn't work at all . The above html Code , Let me add some boxes to it .
Example ：

first
the second
Third
The fourth one
The fifth one
Sixth

9、 How to make the width of these boxes work , There is not a row , It can automatically rank in the second row ？ Here we need to use the line feed in the elastic layout .

flex-wrap:wrap;

.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-wrap:wrap;
}

Example ：

first
the second
Third
The fourth one
The fifth one
Sixth

flex-wrap：nowrap; ( Don't wrap )

flex-wrap：wrap;（ Line break ）

flex-wrap：wrap-reverse;（ Line feed in reverse order ）

Reverse line feed effect ：
Example ：

first
the second
Third
The fourth one
The fifth one
Sixth
​

source ：https://blog.xybin.top/2022/flex
10、 The above newline defaults to x Axis wrapped , Of course, with y Axis to wrap , in other words , When the first column is full , In the second column .

You need to use flex-flow:row nowrap; ( By default ) flex-flow:column wrap; (y Axis wrap ) flex-flow:column wrap-reverse;( In reverse order y Axis wrap )

y Axis wrap

.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-flow:column wrap;
}

Example ：

first
the second
Third
The fourth one
The fifth one
Sixth

In reverse order y Axis wrap ：
Example ：

first
the second
Third
The fourth one
The fifth one
Sixth

11、 That's in css The positional relationship in , Left, middle and right in the horizontal direction , Up, middle and down in the vertical direction , How to realize it with elastic layout ？ Here is how to realize elastic layout . First, look at the horizontal reversal ：

Horizontal layout

　　justify-content:flex-start;  Horizontal left 

　　justify-content:center;   in 

　　justify-content:flex-end;  Horizontal right 

　　justify-content:space-around;  centered , There are also gaps on both sides 

　　justify-content:space-between;  There is no gap on both sides 

Look at the effect in turn ：
　　justify-content:flex-start; Horizontal left （ default ）
Example ：

first
the second
Third

justify-content:center; in
Example ：

first
the second
Third

justify-content:flex-end; Horizontal right
Example ：

first
the second
Third

justify-content:space-around; centered , There are also gaps on both sides （ And equal ）
Example ：

first
the second
Third

justify-content:space-between; There is no gap on both sides （ Arranged evenly ）

Example ：

first
the second
Third

Vertical layout

　　align-items:flex-start;  On 
　　align-items:center;  in   （ Compared with css style , Vertical reverse Center flex Flexible layout is a good advantage ）
　　align-items:flex-end;  Next 

Here is a vertical bottom ：
Example ：

first
the second
Third

However, the above vertical layout must be based on a prerequisite , namely A single There is only one line . For many lines , That is, newline , The appearance is not what we need to see

as follows ：

<div class="box">
  <div class="boxone"> first div>
  <div class="boxtwo"> the second div>
  <div class="boxthree"> Third div>
  <div class="boxone"> The fourth one div>
  <div class="boxtwo"> The fifth one div>
  <div class="boxthree"> Sixth div>
div>

.box{
width: 500px;
height:800px;
background: pink;
display: flex;
flex-wrap:wrap;
align-content:center;
}

Example ：

first
the second
Third
The fourth one
The fifth one
Sixth

In this case, for multiline , We use another property . namely align-content:center; Other upper , Next It's the same , If it is multi line , Namely the items Change to content that will do The others are the same
Example ：

first
the second
Third
The fourth one
The fifth one
Sixth

12、order attribute
　　 Define the demining sequence of the project ,order The smaller the value of , In front of the other side . This attribute is written on a subset that needs to be reordered , That is, on the project . The default is 0;

<div class="box">
  <div class="boxone"> first div>
  <div class="boxtwo"> the second div>
  <div class="boxthree"> Third div>
div>

.box{
width: 500px;
height:600px;
background: pink;
display: flex;
flex-wrap:wrap;
align-items:center;
}
.boxone{
width: 100px;
height:200px;
background: red;
order:3;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
order:1;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}

Example ：

first
the second
Third

source ：https://blog.xybin.top/2022/flex