Detailed explanation of Css flex (elastic) layout
I believe that everyone is familiar with the flexible box of CSS, and it is used in many places in daily life. Recently, with the gradual deepening of learning, I found that the flexible box of CSS is used more and more, and this word has an impression on me When I was still learning CSS, I didn’t know much about it at that time, but now I realized how important the flexible box of CSS is, so I wrote this blog this time to make up for it
initial css flex layout
Flex layout is the abbreviation of flexble box, that is, elastic layout
All elements can use flexible layout (block level, row level)
The flex attribute is mostly added to the parent element, and the elastic child elements of the parent element to which the flex attribute is added are arranged in rows (same as adding floats in the same row)
<body>
<div class="total">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
<style>
.total{
display: flex;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
.three{
width: 200px;
height: 200px;
background-color: green;
}
</style>
Then let's understand some properties of flex
flex-direction
Determine the direction of the main axis, that is, the arrangement direction of the elastic sub-elements
flex-direction:row //主轴是水平方向，起点在左边。也就是从左往右排(默认的是这个)
flex-direction:row-reverse //主轴是水平，起点在右边
flex-direction:column //主轴是垂直方向,起点在上沿
flex-direction:column-reverse //主轴是垂直方向，起点在下沿
flex-wrap
Let flex elements split when necessary
flex-wrap: wrap; //自动换行
flex-wrap: nowrap; //不换行，平均挤压
<style>
.total{
width: 400px;
height: 200px;
display: flex;
flex-wrap: wrap;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
.three{
width: 200px;
height: 200px;
background-color: green;
}
</style>
When we set the width and height of the parent element, if the width of the child elements prevents them from being arranged in the same line, if flex-wrap is added, the element will wrap automatically, as follows
And what is added is flex-nowarp
We can find that the elements are squeezed to the same line to display
align-content
The way the child elements are arranged vertically, according to the parent element
align-content:center //主轴在中间，也就是垂直居中
align-content：flex-start //主轴在父元素的顶部
align-content:flex-end //主轴在父元素的底部
align-content:space-around //上下中均留边距
align-content:between //紧贴上下边距
justify-content
The horizontal arrangement of child elements is similar to that of vertical
justify-content:center
justify-content：flex-start
justify-content:flex-end
justify-content:space-around
justify-content:between
align-items
It's a bit like justify-content, but align-items is mainly for vertical alignment
flex-start：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的（Y）轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两
Benefits of flexbox
The advantages are obvious, very easy and convenient. It is easy to achieve a certain layout effect by operating on a piece of elements.
There are also disadvantages, that is, the problem of compatibility, only supports ie9 and above.
In general, elastic boxes are used more and more nowadays, and early mastery of this will be of great help to future studies