一、布局需求如下
- 类九宫格布局
- 固定高度溢出滚动
- 子元素少时也是紧密排列
我们设置代码结构如下
.goods-wrap
.goods-item(v-for="i in 10")
<style lang="stylus" scoped>
.goods-wrap
display flex
flex-wrap wrap
height 5.38rem
overflow-y auto
border 1px solid red
.goods-item
bg-size(3.54rem,1.8rem,'card_bg')
margin-bottom 0.2rem
flex-shrink 0
margin-right 0.06rem
border 1px solid blue
</style>
现在页面显示正常;但是当子元素goods-item
少于9个 无法溢出时,界面表现如下
而不是我期待的
似乎纵向剩余空间被两行平分了;
align-content介绍
align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。
当创建一个 flex 容器时,就是建立了一个 flex formatting context .在这种情况下,容器的子项成为 flex 元素并遵循 flex 布局,而不是块布局。默认情况下, flex 元素在单个非环绕行中对齐(任何块或内联 display
值都被 flex 规则覆盖)
两行之间有很宽的空间是因为默认值 align-content
是 stretch
,它告诉柔性线在它们之间平均分配纵轴上的自由空间。
属性以及测试页面
当然也可以把height: 5.38rem
设置成max-height:5.38rem