11.2 flex布局的基本概念

1、flex容器与flex子元素

（1）基础示例

示例代码

<div id="div1" style="display: flex;">
    <div id="div2">第1列</div>
    <div id="div3">第2列</div>
    <div id="div4">第3列</div>
</div>

div1是flex容器，div2、div3、div4是flex子元素。设置display: flex的元素称为flex容器flex container，flex容器的子元素称为flex项flex item、列、flex子元素。

（2）flex子元素内嵌套复杂布局

示例代码

<!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;
        }

        [class^="col"]{
            width: 150px;
            /* flex: 1; */
        }

        .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>

[class^="col"]表示匹配class属性名以col开头的元素。这里在每列仅加入两个div，还能继续复杂布局内容。运行效果

2、弹性

flex子元素默认会收缩不会伸长，可以分别设置。

示例代码：各列添加flex: 1设置同时支持伸长与收缩。

        [class^="col"]{
            width: 100px;
            flex: 1;
        }

运行效果

第1列宽度原始设置150px，现已伸长至170px。

弹性的定义。当调整flex容器的宽度变大（这里通过调整窗口大小），各列显示宽度会在原始宽度（width或flex-basis属性）基础上自动伸长。同理，调整flex容器宽度变小，各列宽度自动收缩。

flex容器宽度太小，各列相应收缩，第3列在收缩时出现溢出。

3、flex布局设计特点

（1）flex容器统一控制子元素。大多数flex专用属性设置在flex容器，统一控制子元素；子元素仅能设置少数flex专用属性。float属于在每个子元素设置。

（2）支持弹性。提供列的伸长与收缩。

（3）多排列方向支持与响应式支持。子元素order属性配合支持响应式需求。

（4）提供各种对齐与排列。包括水平方向、垂直方向、多行场景。

❮上一节列式布局发展历程下一节 flex布局模型与规范规则❯

第11章 flex布局模型

11.2 flex布局的基本概念

CSS入门项目小步教程