11.5 flex容器设置

flex容器设置包括：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、gap。

11.5.1 方向flex-direction

包括4个值：水平row、水平反转row-reverse、垂直column、垂直反转column-reverse。

开发者工具示意图如下，可直接进行调试设置。

flex-direction默认值row，表示子元素显示在一行；值column表示显示在一列。

        .parent{
            display: flex;
            flex-direction: column;
            border: 1px solid #666;
        }

运行效果

11.5.2 垂直排列应用于响应式布局

垂直方向排列主要用于响应式布局。当窗口较宽时按列排，当调整窗口变窄或小尺寸设备（例如手机）窗口本身就窄，则按行排。

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小步教程</title>

    <style>
        *{
            box-sizing: border-box;
        }
        .parent{
            display: flex;            
            border: 1px solid #666;
        }

        @media screen and (max-width : 520px) {
            .parent{
                flex-direction: column;
            }
        }

        [class^="col"]{
            width: 150px;
        }

        .col1{
            background-color: #0aaa76;
        }

        .col2{
            background-color: #4aa6fc;
        }

        .col3{
            background-color: #ed7d31;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="col1">
            <div>第1列</div>
            <div>小步教程</div>
        </div>
        <div class="col2">
            <div>第2列</div>
            <div>xiaobuteach.com</div>
        </div>
        <div class="col3">
            <div>第3列</div>
            <div>每列可继续加入复杂布局</div>
        </div>
    </div>
</body>
</html>

@media用于响应式布局，也称媒体查询，用于根据窗口尺寸设置样式。

运行效果。当窗口大小>520px时，按列显示。