Article directory
foreword
Flex layout is one of the commonly used front-end layout methods, but in the process of using it, we always feel inconvenient, because in daily development, most of the time, the effect we want is like this
That is, the left and right ends are aligned and the top is full, and the left and right spacing of the small boxes is the same, and they are arranged from left to right.
Today we will mainly discuss, through css, there are several ways to achieve it, and their advantages and disadvantages.
Way one nth-child
<template>
<div class="main">
<div class="flex-box">
<div class="item-box">...</div>
...
</div>
</div>
</template>
.flex-box {
display: flex; // 设置成为flex模式
flex-wrap: wrap; // 允许换行
}
.item-box {
width: 22%; // 以4个一行为例，有4个子盒子，3个间距
margin-right: 4%; // 3 * 4 + 4 * 22 = 100
margin-bottom: 20px; // 行与行之间也要设置边距。
}
// 如果一行是5个就是 5 + 5n
.item-box:nth-child(4 + 4n) {
// 当n为0时，即表示第一行最后一个元素，不需要右外边距，否则就超出 100%了。
margin-right: 0 !important;
}
Advantages: The layout scheme we want is realized, the amount of code is not complicated, and there is basically no compatibility problem.
Disadvantage 1: When encountering the following situations, this setting will be invalid.
<template>
<div class="main">
<div class="flex-box">
<div class="item-box">...</div>
<div class="item-box" style="display:none;"></div>
</div>
</div>
</template>
This is because nth-child is set according to the number of sub-boxes. Although some of the sub-boxes disappear, its elements still exist and the number has not changed.
Disadvantage 2: It is not flexible enough. If the number of each line is different under different screen resolutions (this is often the case when doing responsive), you need to write an additional set of style codes under different resolutions.
@media screen and (max-width: 991px) {
.flex-box {
display: flex; // 设置成为flex模式
flex-wrap: wrap; // 允许换行
}
.item-box {
width: 48%; // 以2个一行为例，有2个子盒子，1个间距
margin-right: 4%; // 1 * 4 + 2 * 48 = 100
margin-bottom: 20px; // 行与行之间也要设置边距。
}
// 如果一行是2个就是 2 + 2n
.item-box:nth-child(2 + 2n) {
// 当n为0时，即表示第一行最后一个元素，不需要右外边距，否则就超出 100%了。
margin-right: 0 !important;
}
}
Method 2 gap attribute
.flex-box {
display: flex; // 设置成为flex模式
flex-wrap: wrap; // 允许换行
gap: 4%; // 设置间距为4%
}
.item-box {
width: 22%; // 以4个一行为例，有4个子盒子，3个间距
margin-bottom: 20px; // 行与行之间也要设置边距。
}
Advantages: Obviously, this method requires less code and is more convenient, and there is no disadvantage 1 of method 1, that is, it display:none;will not cause any impact.
Disadvantage 1: gap is still a very new attribute at present, and its compatibility with browsers is not high, especially not compatible with ie11. If the project has no compatibility requirements for browsers, you can use gap, and of course you can change the layout method ,display:grid;
Disadvantage 2: Of course, this method also needs to configure different resolutions and write an additional set of codes, but relatively speaking, it is much easier.
Method 3 Set the left and right sides of the margin to negative values
.flex-box {
display: flex; // 设置成为flex模式
flex-wrap: wrap; // 允许换行
margin: 0 -2% 0 -2% // 间距为4%
}
.item-box {
width: 21%; // 以4个一行为例，有4个子盒子，4个间距 4 * 21 + 4 * 4 = 100
margin: 0 2% 20px 2%; // 左右两边各2%，所以间距为4%
}
Advantages: The compatibility is very good, it can be compatible with ie11, and there is no display：none;time problem.
Disadvantage 1: The code is slightly complicated, and the width of the box and the spacing need to be arranged reasonably, which is consistent with the number of spacing and the number of boxes in the previous two methods. The left and right margins need to be set separately.
Disadvantage 2: It is necessary to write an additional set of codes for configurations with different resolutions.
Summarize
Among the three methods, the second method is the simplest, but has limited compatibility; the first method has a lot of code, moderate compatibility, and display:none；serious problems. The last method is the most recommended, although there are some calculations, and it is also The width should be allocated reasonably, but its compatibility is the best, and there are basically no scenarios where it cannot be applied. As the saying goes, one trick can be used everywhere.
As for disadvantage 2, facing the problem of different resolutions, the number of each line will change. At present, there is no particularly good solution, and an additional set of style codes is required to solve it.
Of course, you can use scss or less to create a for loop to encapsulate styles from 2 to 10 in a row. When using this, you can directly use the class name, such as flex-row-6, flex-row- 4 etc.
@for $i from 2 through 10 {
.flex-row-#{
$i} {
display: flex;
flex-wrap: wrap;
.item {
width: calc(96% / #{
$i}) !important;
margin-right: calc(4% / #{
$i - 1}) !important;
margin-bottom: 20px;
}
.item:nth-child(#{
$i}n + #{
$i}) {
margin-right: 0 !important;
}
}
}