CSS核心（五十六）弹性布局flex弹性盒子的多行/多列对齐 align-content

人亦已歌 · 发表于 2023-2-1 22:57:05

请注意：align-content控制的是多行或多列，如果元素都在同一行或同一列，该属性不生效。

align-content必须配合flex-wrap:wrap;换行属性使用。

元素横向排列时，换行后控制行

元素纵向排列时，换行后控制列

请看代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子的多行/多列对齐 align-content</title>
</head>
<style>
        /* 横向排列换行后控制行 */
        /* 纵向排列换行后控制列 */
        .box{
                width:600px;
                height:400px;
                border:1px solid #000;
                /* 设置弹性容器 */
                display:flex;
                flex-direction:column;
                flex-wrap:wrap;
                
                /* 两端对齐 */
                /* align-content:space-between; */
                
                /* 底部对齐 */
                /* align-content:flex-end; */
                
                /* 顶部对齐 */
                /* align-content:flex-start; */

                /* 元素被拉伸以适应容器(默认) */
                /* align-content:stretch; */
                
                /* 中心聚合对齐 */
                /* align-content:center; */
                
                /* 环绕对齐 */
                align-content:space-around;


        }
        .box div{
                width:150px;
                height:80px;
                border:        5px solid #0f0;
                
                
        }
</style>
<body>
<div class="box">
        <div>第一个盒子</div>
        <div>第二个盒子</div>
        <div>第三个盒子</div>
        <div>第四个盒子</div>
        <div>第五个盒子</div>
        <div>第六个盒子</div>
        <div>第七个盒子</div>
        <div>第八个盒子</div>
        <div>第九个盒子</div>
</div>
</body>
</html>

以上代码测试的是排列方式为列，并换行的情况，大家可以把列改为行再逐条测试，最终结果由以下两张图概括，非常重要。

CSS核心（五十六）弹性布局flex弹性盒子的多行/多列对齐 align-content