使用display:flex布局时，如何让指定内容换行显示？

嘿，我看你遇到了Flex布局里内容没法换行的问题，其实原因很简单——默认情况下Flex容器的flex-direction是row，所有子元素会在一行水平排列。要让图标和“Kartlar”标题分两行显示，只需要给.customcol添加flex-direction: column属性就可以解决啦！

修改后的完整代码 #

<style>
body {
    background: rgba(13, 190, 81, .5);
}
.customcol:hover {
    background: rgba(13, 190, 81, .8);
}
.customcol {
    width: 33.33%;
    float: left;
    text-align: center;
    box-sizing: border-box;
    color: white;
    height: 86vh;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* 添加垂直排列的属性，让子元素换行堆叠 */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            -webkit-justify-content: center;
                justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            -webkit-align-items: center;
                align-items: center;
    background: transparent;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.fa-6x {
    font-size: 6em;
}
.fa-7x {
    font-size: 7em;
}
</style>
<div class="col customcol">
    <i class="fa fa-credit-card fa-5x " aria-hidden="true"></i>
    <div>
        <h3>Kartlar</h3>
    </div>
</div>

原理说明 #

添加flex-direction: column后，Flex容器的子元素（图标和包含标题的div）会从水平排列变成垂直堆叠，这样“Kartlar”标题就会自动显示在图标的下方，也就是新的一行。同时原来的justify-content: center和align-items: center会继续生效，保证内容在容器中水平和垂直居中。

内容的提问来源于stack exchange，提问作者Ayxan Əmiraslanlı