The earliest implementation of layout was to use floats, but the original purpose of floats was to wrap around pictures and text. It just happens to be used for layout, and there is a problem of height collapse when using floats, although cleanfix can be used to fix this problem. But the ideal state is that it is best to have a function that is specially designed to deal with this matter, rather than being patched by developers. Floats are a very old and awkward feature of CSS. Flex is designed to solve layout problems. Flex layout is very easy to use, but ie needs 10 to support it. However, ie10 is no longer maintained. Other browsers are supported, including mobile browsers. Flex is very popular on the mobile side, and it is becoming more and more popular on the PC side.
Regarding the definition and tutorials of flex, Firefox's official documentation is the most detailed, and w3c's seems to have no model diagrams.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Two important elements of flex flex-container and flex-item
These two concepts need to be understood, there is no relevant code, it is just a concept. It is convenient to describe Flex.
For example, the product below is wrapped in a large div, as long as the div is set as a flex attribute, then this div is called flex-container, and the small divs (or sub-elements) inside are flex-items. Very easy to understand.
Advantages of turning on flex and flex
Turning on flex is also very simple.
Use display:flex to enable the flex function, which is a block element. It can also be set to inline-flex to become an inline element that can change the size.
#box {
display: flex;
/*display: inline-flex;*/
}
We write three divs, which by default look like the following. (The font is centered). Now how do I want to arrange the three divs horizontally? The float attribute can be set for all three divs. If you use flex to achieve. It can be achieved by directly setting the parent div to flex.
<style rel="stylesheet">
#box {
}
.div1{
width: 200px;
height: 200px;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
background-color: lightsalmon;
}
.fontCenter{
text-align: center;
line-height: 200px;
font-size: 50px;
}
</style>
<div id="box">
<div class="div1 fontCenter">1</div>
<div class="div2 fontCenter">2</div>
<div class="div3 fontCenter">3</div>
</div>
Using flex one line of code realizes the function of horizontal arrangement.
#box {
display: flex;
/*display: inline-block;*/
}
But what if I wanted to align the three layouts to the right? The approach of float is to treat the three divs as a whole, and then let the whole float to the right. It is very simple to use flex, and it can be realized by adding the following line to flex-container. The details are explained below.
#box {
display: flex;
justify-content: end;
}
You can see that flex is very efficient and concise.
flex positioning system
There are no x and y axes in flex. Instead, they are called the main axis and the cross axis. The concept is completely different, not just a different name. After we set the following code, the positioning system of flex will look like the picture below. The direction of the main axis is from left to right. The leftmost is main-start, and the right is main-end. This is very easy to understand.
display: flex;
//默认值就是row，可以不写
//flex-direction: row;
The following figure is a schematic diagram of a main axis. We can see that the main axis has two directions in the horizontal direction, and it is followed by an attribute flex-direction:row indicating that the direction is from right to left. If it is set to flex-direction :row-reverse is from left to right. Of course main-start and main-end will also change accordingly.
Not only that, the main axis can also be in the vertical direction (flex-direction: column), and there are also two directions. flex-direction:column means from top to bottom, flex-direction:column means from bottom to top. Of course main-start and main-end will also change accordingly. That is, the main axis can have four directions, of course only one direction can be set at the same time.
There is another axis that is perpendicular to the main axis, we call it the cross axis. By default (just enable flex, without any additional operations), the entire positioning system is shown in the figure below.
In fact, the default is in the form of x and y axes.
There are four corresponding layout situations as follows.
The alignment of child elements can be adjusted through the justify-content attribute. Very convenient.
For the centering situation, three effects are provided by default, all of which are very practical.
The details are illustrated in the following case examples.
Specific cases and common layout implementations
Situation 1: Horizontal layout (to the left)
As mentioned earlier, it can be realized as long as flex is turned on.
Situation 2: Horizontally to the right
Justify-content is set to flex-end.
display: flex;
justify-content: flex-end;
Situation 3: Horizontally centered
Normal centered:
display: flex;
justify-content: center;
Centering effect:
justify-content can also set three different centering effects, the effect is as shown in the figure below, you can try it yourself.
flex-wrap
We have 9 square divs. Arrange horizontally after flex is set, because the width exceeds the screen width. The nine div widths are all compressed, which is the default handling of flex.
Of course, it is best to be able to wrap the display, and flex-wrap can realize such a function.
flex-wrap: wrap;
Another value is wrap-reverse, but it is generally not used.
flex-wrap: wrap-reverse;
flex-flow
This property means that flex-direction and flex-wrap can be set at the same time, which is not interesting and feels very tasteless.
display: flex;
flex-flow: row-reverse wrap;
align-items attribute
This property is specially used to deal with the alignment of the item of the cross axis. By default, the direction of the cross axis is from top to bottom (other directions are similar, just opposite).
There are a total of 5 values below.
flex-start: top alignment
flex-start: bottom alignment
center: middle alignment
baseline: baseline alignment, the baseline is a concept of text, equivalent to the bottom of the text. If there are multiple lines of text, align the stretch with the first line
: If you don't set the item's height (as long as there is one), then all items will be filled with full height.
You can find out by setting it yourself.
In the case of multiple rows, there will be gaps between items, and the large height of this gap is obtained by dividing the redundant height equally.
#box {
display: flex;
flex-flow: row wrap;
align-items: flex-end;
height: 500px;
background-color: plum;
}
align-content attribute
align-content is specially used to handle multiple lines, there is no need to use this for a single line, just use align-items.
Similar to align-items, align-items affects each item individually, while align-content affects these items as a whole.
The difference from align-item is that in the case of multiple lines, the height of the item is not as large as the gap, and it looks exactly as it was originally, but it is just an overall alignment.
Three types of center alignment are also supported.
here. All the properties of flex-container are finished.
properties of flex-item
The previous ones are the properties of flex-container, now let’s talk about the properties of flex-item
order attribute
The value of order is 0 by default, and the smaller the value, the higher the order.
.div1{
width: 200px;
height: 200px;
order: 3;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
order: 1;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
order: 2;
background-color: lightsalmon;
}
align-self
If there is an element that wants to be special, you can use this attribute to set the element separately.
.div1{
width: 200px;
height: 200px;
order: 3;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
order: 1;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
order: 2;
align-self: flex-end;
background-color: lightsalmon;
}
flex-grow
This property is used to fill in the blank space. For example, the three divs below.
Both set the flex-grow property. It will become like below.
.div1{
width: 200px;
height: 200px;
flex-grow: 1;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
flex-grow: 2;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
flex-grow: 1;
background-color: lightsalmon;
}
For example, the length is 1000px, and the width of the three divs is 100px, then
the increased length of div1=(1000-100 3)/4 1
The increased length of div2=(1000-100 3)/4 2
The increased length of div3=(1000 -100 3)/4 1
If the sum of all items in flex-grow is less than 1, just multiply the value of flex-grow by the extra length.
.div1{
width: 200px;
height: 200px;
flex-grow: .1;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
flex-grow: .6;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
flex-grow: .3;
background-color: lightsalmon;
}
It will come out empty.
The increased length of div1=(1000-100)*0.1
The increased length of div2=(1000-100)*0.6
The increased length of div3=(1000-100)*0.2
If the three values add up to more than 1, then the algorithm is actually the same as the integer it's the same. Both increase proportionally, and there is no difference between the two.
.div1{
width: 200px;
height: 200px;
flex-grow: .1;
background-color: lightblue;
}
.div2{
width: 200px;
height: 200px;
flex-grow: .6;
background-color: lightgreen;
}
.div3{
width: 200px;
height: 200px;
flex-grow: .5;
background-color: lightsalmon;
}
flex-shrick
Contrary to flex-grow, flex-shrick is used to shrink the item when there is not enough space. For example, the following code,
the reduced length of div1=(900-700)/5 1=40
the reduced length of div2=(900-700)/5 3=120
the reduced length of div3=(900-700)/5*1= 40
#box {
display: flex;
/*display: inline-block;*/
height: 500px;
width: 700px;
/*align-items: flex-end;*/
background-color: plum;
}
.div1{
width: 300px;
height: 200px;
flex-shrink: 1;
background-color: lightblue;
}
.div2{
width: 300px;
height: 200px;
flex-shrink: 3;
background-color: lightgreen;
}
.div3{
width: 300px;
height: 200px;
flex-shrink: 1;
background-color: lightsalmon;
}
If the sum of flex-shrike is less than 1, then directly multiply proportionally, but it is rarely used.
.div1{
width: 300px;
height: 200px;
flex-shrink: .1;
background-color: lightblue;
}
.div2{
width: 300px;
height: 200px;
flex-shrink: .6;
background-color: lightgreen;
}
.div3{
width: 300px;
height: 200px;
flex-shrink: .2;
background-color: lightsalmon;
}
div1 reduced length=(900-700)*0.1=20
div2 reduced length=(900-700)*0.6=120
div3 reduced length=(900-700)*0.2=40
so 200-180=20, also It will exceed the space of 20px, as shown in the figure below.
flex-basis
It is about equal to width, but there is a difference, and I feel that it has no practical significance.
flex
Flex is the combination of flex-shricks, flex-grow, and flex-basis.
Means nothing.
flex: 1,1,100px
https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/