CSS: flex九宫格布局

661 阅读1分钟

一、布局需求如下

  1. 类九宫格布局
  2. 固定高度溢出滚动
  3. 子元素少时也是紧密排列

image.png image.png 我们设置代码结构如下

.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个 无法溢出时,界面表现如下

image.png

而不是我期待的

似乎纵向剩余空间被两行平分了;

align-content介绍

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。

当创建一个 flex 容器时,就是建立了一个 flex formatting context .在这种情况下,容器的子项成为 flex 元素并遵循 flex 布局,而不是块布局。默认情况下, flex 元素在单个非环绕行中对齐(任何块或内联 display 值都被 flex 规则覆盖)

两行之间有很宽的空间是因为默认值 align-content是 stretch ,它告诉柔性线在它们之间平均分配纵轴上的自由空间。

属性以及测试页面

image.png 点击前往

当然也可以把height: 5.38rem设置成max-height:5.38rem