flex column方向时，wrap自动换列后内容不能撑开父元素的大坑


一、前言

需求：整体容器高度固定，一列展示6个商品，列数不固定。

效果如下（列数不固定，可3可4）：

二、思路

于是就想这 so easy ~，用 flex 布局，把 flex-direction 设置成 column（列) , 然后固定 box 的高度和每一个 item 的高度，再设置高度不够自动换列，不就解决了嘛。。。但是一顿操作后，发现这里边的内容是对的，但是里边的内容并没有把外层的容器撑开，如下图。

于是查了一下， 好多人都遇到这个问题，好像是flex的一个小问题。此路不通呀，于是跟着大佬们换了另一种方法，使用css里的writing-mode属性来实现，该属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

三、解决办法：

Html主要代码：

1
2
3
4
5
6
<div class="home-category-detail" @mouseleave="leave()" v-show="isShowCategoryDetail" @mouseenter="showCategoryDetailFn">
    <a :href="item.href" v-for="(item,index) in homeCategoryDetail" :key="'phoneNavList' + index" >
          <img :src="item.src" :alt="item.name">
          <span style="display:inline-block;">{<!-- -->{item.name}}</span>
    </a>
</div>

css:

在最外层父元素( home-category-detail )上设置 writing-mode: vertical-lr ，即内容垂直方向排列，左对齐。然后会发现，a 标签中的 img 和 span 也从上往下排了，此时需要在 a 标签上加上 writing-mode: horizontal-tb 即可。以下是我的css部分，仅供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.home-category-detail {
    height: 460px;
    width: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 234px;
    writing-mode: vertical-lr;
    box-shadow: #b0b0b0 3px 5px 10px;
    a {
        height: 70px;
        width: 228px;
        text-align: left;
        padding-left: 20px;
        color: #333;
        writing-mode: horizontal-tb;
        line-height: 70px;
        img {
            height: 50px;
            width: 50px;
            vertical-align: middle;
        }
    }
}