❮上一节 flex子元素设置下一节 flex子元素设置（续）❯

11.7 flex容器设置（续）

本节继续讲解flex容器设置。

11.7.1 自动换行flex-wrap

flex布局通过“自动换行”，从而形成多列多行结构。flex布局与float布局靠自动换行实现多行多列，而table布局与grid布局是直接指定行。

当容器宽度小于各列宽度之和，共有3种处理方式。

（1）自动换行。容器宽度与列宽度均不变。

（2）溢出显示。容器宽度与列宽度均不变。

（3）列收缩。容器宽度不变，列宽度缩小。

三种处理方式示意图如下。

第3种方式收缩处理前面已经介绍，这里介绍前两种处理。

处理方式1：自动换行处理

flex-wrap用于flex容器，表示flex子元素是否自动换行。默认值nowrap表示不会自动换行，值wrap表示会自动换行。

示例代码

<!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;
            flex-wrap: wrap; /* add */
            border: 2px solid #666;
            width: 500px;
        }



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

        .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>xiaobuteach.com</div>
        </div>
        <div class="col2">
            <div>第2列</div>            
        </div>
        <div class="col3">
            <div>第3列</div>
            <div>每列可继续加入复杂布局</div>
        </div>
    </div>
</body>
</html>

运行效果

开发者工具关于是否换行的示意图如下。flexbox编辑器图标设计非常形象。

处理方式2：溢出

设置既不换行又不收缩从而让它溢出。

步骤1：使用flex-wrap默认nowrap设置不换行。

步骤2：同时通过flex: 0 0 auto设置子元素不伸缩。

        .parent{
            display: flex;
            border: 2px solid #000;
            width: 500px; /* add */
        }

        [class^="col"]{
            width: 200px;
            flex: 0 0 auto; /* add */
        }

运行效果

11.7.2 复合属性flex-flow

flex-flow是flex-direction与flex-wrap的复合属性，flex-flow的默认值：row nowrap。

示例代码

        .parent{
            display: flex;
            flex-wrap: wrap;
        }

等价

        .parent{
            display: flex;
            flex-flow: row wrap;
        }

11.7.3 flex line box

1、flex行盒模型示意图

flex容器内部会新建一个flex格式化上下文（FFC），针对每一行会新建逻辑对象flex行盒，flex line box，原理类似IFC的行盒。当flex容器设置flex-wrap: wrap允许自动换行时，第一个行盒的宽度不足以容纳flex item4，自动换行也就是新建一个行盒flex line box2。

示例代码

 <!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;
            flex-wrap: wrap; 
            justify-content: space-between;
            align-items: flex-start;
            align-content: stretch;
            border: 2px solid #666;
            width: 450px;
            height: 200px;
        }

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

        .col1{
            background-color: #0aaa76;
            align-self: center;
            flex-grow: 1;
        }

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

        .col3{
            background-color: #ed7d31;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="col1">
            <div>第1列</div>
            <div>小步教程 xiaobuteach.com</div>
        </div>
        <div class="col2">第2列</div>
        <div class="col3">第3列</div>
        <div class="col2" style="width: 100px;">第4列</div>
        <div class="col3">第5列</div>
        <div class="col1">第6列</div>
    </div>
</body>
</html>

运行效果

2、各种对齐属性

（1）水平对齐方式justify-content表示子元素在flex行盒内部的对齐。

（2）垂直对齐方式align-items表示子元素在flex行盒内部的对齐，align-items设置所有子元素的默认垂直对齐，子元素通过align-self单独设置自己的垂直对齐。

（3）多行对齐方式align-content表示多个flex行盒在flex容器内的对齐。

属性flex-grow的伸长与属性flex-shrink的收缩发生在flex行盒内部。

11.7.4 行内水平对齐与排列justify-content

属性justify-content表示各元素在一个flex行盒内的水平对齐与排列，包括三种对齐与三种排列。justify-content示意图如下。

Chrome开发者工具的示意图

属性值具体说明。

三种对齐：默认值normal，相当于值flex-start左对齐；flex-end右对齐；center居中对齐。

三种排列：space-around，space-between、space-evenly，列间距不同。

space-between：左右无间距，其余列间距平分剩余宽度。数学表达式为 0：1：1：0。

space-around：最左最右是其余列间距的一半。数学表达式为 0.5：1：1：0.5。

space-evenly：最左最右与其它列间距相等。数学表达式为 1：1：1：1。

示例1：space-between。

<!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;            
            justify-content: space-between;
            border: 1px solid #666;
        }

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

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

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

        .col3{
            background-color: #ed7d31;
            height: 150px;
        }
    </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>

运行效果

试一试。space-evenly、space-around运行效果。

11.7.5 行内垂直对齐

1、flex容器align-items统一设置

flex容器属性align-items表示各元素在一个flex行盒内垂直对齐。

开发者工具的示意图

flex布局共支持5种单行内的垂直对齐：顶部对齐flex-start、垂直居中center、底部对齐flex-end、拉伸至顶部与底部stretch、基线对齐baseline。

align-items默认值normal，等同于stretch，表示子元素高度自动伸展至容器高度。其余4种对齐方式不会拉伸。

示例1：stretch拉伸对齐。

前面基本所有代码都使用了stretch值。

<!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;
            align-items: stretch;
            /* align-items: flex-end; */
            border: 1px solid #666;
        }



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

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

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

        .col3 {
            background-color: #ed7d31;
            height: 150px;
        }
    </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>

设置了3个flex子元素的高度height，运行效果3列都占满整个高度，相当于height设置无效。运行效果

示例2：flex-end底部对齐。代码略，运行效果如下，前两列不再被拉伸高度。

试一试。其它flex行盒内垂直对齐方式。

2、flex子元素align-self独立设置

flex容器元素通过align-item属性统一设置所有子元素在每一行的垂直对齐方式，flex子元素能够通过align-self单独设置自身的垂直对齐方式。

示例代码：为col2添加align-self: center。

        .col2{           
            align-self: center;
        }

运行效果

11.7.6 多行的垂直对齐与排列align-content

justify-content与align-items指元素在行盒内的对齐排列，align-content是多个行盒在flex容器的对齐排列。包括3种对齐与3种排列。

3种对齐示意图。虚线框表示flex行盒。

3种排列示意图

属性值具体说明。

3种对齐：顶部对齐flex-start、垂直居中center、底部对齐flex-end。

3种排列：space-between两端留0，space-around两端留0.5倍列间距，stretch拉伸所有行盒填满剩余空间。

Chrome开发者工具示意图

示例代码

<!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;
            align-content: space-between;
            border: 1px solid #666;
            width: 470px;
            height: 150px;
            flex-wrap: wrap;
        }


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

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

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

        .col3 {
            background-color: #ed7d31;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="col1">第1列 小步教程</div>
        <div class="col2">第2列 xiaobuteach.com</div>
        <div class="col3">第3列</div>
        <div class="col1">第4列</div>
        <div class="col2">第5列</div>
        <div class="col3">第6列</div>
        <div class="col1">第7列</div>
        <div class="col2">第8列</div>
        <div class="col3">第9列</div>
        
    </div>
</body>

</html>

运行效果

11.7.7 间距gap

gap复合属性包括row-gap行间距与column-gap列间距。

gap示意图

gap只用于控制各子元素之间的间距，不会用于子元素与行盒或容器的间距。每个行盒的第1个子元素左边与最后1个子元素右边，不存在gap；第1行的上方与最后一方的下方，不存在gap。当子元素继续添加margin或padding值，则继续叠加间距。

示例代码

<!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;
            align-content: space-between;
            border: 1px solid #666;
            width: 500px;
            flex-wrap: wrap;
            row-gap: 10px;
            column-gap: 30px;
            /* gap: 10px 30px; */
            /* gap: 20px; */
        }

        [class^="col"] {
            width: 140px;
            height: 50px;
        }

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

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

        .col3 {
            background-color: #ed7d31;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="col1">第1列 小步教程</div>
        <div class="col2">第2列 xiaobuteach.com</div>
        <div class="col3">第3列</div>
        <div class="col2">第4列</div>
        <div class="col3">第5列</div>
        <div class="col1">第6列</div>
        <div class="col1">第7列</div>
        <div class="col2">第8列</div>
        <div class="col3">第9列</div>        
    </div>
</body>

</html>

运行结果

属性gap复合属性，对应row-gap与column-gap。原子属性写法

row-gap: 10px;
column-gap: 30px;

等价复合属性写法

gap: 10px 30px;

gap单值写法：表示row-gap与column-gap都是同一个值。

gap: 20px ;

等价完整写法

gap: 20px 20px ;

❮上一节 flex子元素设置下一节 flex子元素设置（续）❯

第11章 flex布局模型

11.7 flex容器设置（续）

11.7.1 自动换行flex-wrap

11.7.2 复合属性flex-flow

11.7.3 flex line box

11.7.4 行内水平对齐与排列justify-content

11.7.5 行内垂直对齐

11.7.6 多行的垂直对齐与排列align-content

11.7.7 间距gap

CSS入门项目小步教程