效果图：
image.png
html:
<div class="home-card">
<div class="home-item" v-for="n in 7" :key="n">
</div>
</div>
css:
.home-card {
width 100%
overflow hidden
padding 10px 0px
display flex
flex-wrap: wrap
.home-item {
width calc(25% - 30px)
padding 20px 0px 20px 20px
margin-right 10px
margin-bottom 10px
&:nth-child(8) {
margin-right 0
}
}
}
效果图： html: css:
横向布局 横向布局 自动换行 Flex 布局教程：语法篇 文本自动换行 文字超出用省略号显示 wx.switchT...
FLEX布局 一种新的布局方式，flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...
Flex布局 flex布局可以实现空间自动分配自动对齐，适用于简单的线性布局。 flex基本概念 flex con...
Flex 布局可以实现空间自动分配、自动对齐Flex 适用于简单的线性布局，复杂布局使用 Grid 布局注意：设为...
当我们使用flex布局，可以自动换行的时候，经常会出现最后一个布局，没有自动跟在最后一个。因为我们设置flex的c...
我们可以使用flex布局，实现一行元素自动根据屏幕宽度换行，一行元素的个数在屏幕宽度变化的时候会自动调整，代码如下...
flex简介 当我们需要多行多列自适应，任意行对齐时。便可用flex布局实现。Flex是Flexible Box的...
flex-wrap: wrap; 弹性布局，超出一行自动换行。 box-sizing:border-box :内容...
1、设置伸缩布局 2、设置固定宽度 flex-basis 3、弹性盒子实现多行排列 flex-wrap...
本文标题：Vue实现flex 多行多个布局，自动换行
本文链接：https://www.haomeiwen.com/subject/enasxrtx.html
网友评论