CSS核心（五十四）弹性布局flex弹性盒子设置子盒子是否换行 flex-warp

人亦已歌 · 发表于 2023-2-1 21:25:33

纵向排列和横向排列，默认不换行自动拉伸。
纵向排列，如果换行，当多列子盒子宽度大于父盒子的宽度时，将超出弹性盒子，当小于等于时则等距排列（很少用）。
横向排列，如果换行，当多行子盒子高度大于父盒子的高度时，将超出弹性盒子，当小于等于时则等距排列（很少用）。

注意：换行后极难控制，一般都不允许换行。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子设置子盒子是否换行</title>
</head>
<style>
        .box{
                width:300px;
                height:400px;
                border:1px solid #000;
                /* 设置弹性容器 */
                display:flex;
                /* 横向排列 */
                flex-direction:row;
                /* 换行并反向排列 */
                /* flex-wrap:wrap-reverse;         */
                /* 自动换行 */
                /* flex-wrap: wrap; */
                /* 不换行，自动拉伸 */
                /* flex-wrap: nowrap; */
                
                /* 纵向排列 */
                /* flex-direction:column; */
                /* flex-wrap:wrap-reverse; */
                /* flex-wrap: wrap; */
                /* flex-wrap: nowrap; */
        }
        .box div{
                width:100px;
                height:180px;
        }
        .d1{
                background-color: antiquewhite;
        }
        .d2{
                background-color: saddlebrown;
        }
        .d3{
                background-color: brown;
        }
        .d4{
                background-color: cadetblue;
        }
</style>
<body>

<div class="box">
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
        <div class="d4">4</div>
</div>
</body>
</html>

重点了解--横向排列不换行，效果如下：

CSS核心（五十四）弹性布局flex弹性盒子设置子盒子是否换行 flex-warp