神奇的flex布局
作者：互联网
flex布局实现几个常见应用：
1 实现两端对齐，从第二行还是左对齐。
代码如下：
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
css代码：
.box{
width: 1200px;
border:1px solid #f00;
margin:20px auto;
display: flex;
/* justify-content: center; */
flex-wrap: wrap;
}
.box:after{
content:"";
flex:auto
}
.item{
width: 132px;
height:100px ;
background: #ccc;
margin:5px;
}
以上即可实现。特别注意：网上有文章说需要给父级box添加 /* justify-content: center; */其实是错的。如果设置/* justify-content: center; */则会出现第二行margin无法对齐的情况
------------------------------------------------------------------------------------------------
flex实现瀑布流
(一：宽度固定)
<div
class="v-waterfall-content"
id="v-waterfall"
>
<img
v-for="(img,index) in imgArr"
:key="index"
:src="img"
alt=""
>
</div>
data() {
return [
imgArr: [
require("../assets/01.jpg"),
require("../assets/02.jpg"),
require("../assets/03.jpeg"),
.....]
}
}
imgArr: [
require("../assets/01.jpg"),
require("../assets/02.jpg"),
require("../assets/03.jpeg"),
<style scoped>
.v-waterfall-content {
display: flex;
flex-wrap: wrap;
}
.v-waterfall-content img {
flex-grow: 1;
margin: 5px;
height: 200px;
object-fit: cover;
}
@media (min-width: 1200px) {
/*nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第n个子元素的每个元素，从最后一个子元素开始计数，n 可以是数字、关键词或公式*/
.box img:nth-last-of-type(-n + 5) {
flex-grow: 0;
}
}
</style>
以上代码可以试下宽度固定下重置窗口实现图片自动适应的瀑布流布局
但是唯独最后一行会出现一个小小的问题。
想象一下，假如最后一行只有一张图片的话，他会被缩放到充满一行，导致图片只会显示非常小的一部分内容。
所以，我们最后一行的图片不进行缩放处理即可。只需要添加以下css属性即可
.v-waterfall-content :after {
content: "";
display: block;
flex-grow: 99999;
}
标签：flex,assets,..,require,布局,content,waterfall,神奇 来源： https://blog.csdn.net/baidu_41601048/article/details/116848818