通过 CSS盒子模型 和 CSS定位 的学习，可以很容易完成对页面的布局。不过CSS中，还有一种布局方式——flex。这种方式可以简便、完整、响应式地实现各种页面布局。flex是Flexible Box的缩写，意为“弹性盒子”，用来为盒子模型提供最大的灵活性。flex主要有5个属性，下面来一一介绍。

一 flex弹性盒子

五个属性：

1 flex-direction

flex-direction用于设定容器内组件的排列方向，这个在前面的章节中，我们已经用过很多次，其属性值有2个可选值

• column：垂直方向从上到下。
• row：水平方向从左到右，默认值。

示例：

.container {
    flex-direction: column;
}

.container {
    flex-direction: row;
}

2 flex-wrap

flex-wrap用于设定flex容器是单行还是多行显示（默认不换行），其属性值有2个可选值

• nowrap：不换行，单行显示，默认值。
• wrap：换行，多行显示。

示例

.container {
    flex-direction: row;
    flex-wrap: nowrap;
}

.container {
    flex-direction: row;
    flex-wrap: wrap;
}

3 justify-content

justify-content用于设定组件在主轴上的排列位置，这个我们在前面的章节中用到过很多次了，其属性值有5个可选值：

• flex-start：组件位于容器的开头，默认值。
• flex-end：组件位于容器的结尾。
• center：组件位于容器的中心。
• space-between：组件位于各行之间留有空白的容器内。
• space-around：组件位于各行之前、之间、之后都留有空白的容器内。
• space-evenly: 均匀排列每个组件，每个元素之间的间隔相等。

示例

.container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

4 align-items

flex容器当前行的交叉轴对齐格式，可选值为：

• stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度，默认值。
• flex-start：元素向交叉轴起点对齐。
• flex-end：元素向交叉轴终点对齐。
• center：元素在交叉轴居中。

<div class="container">
    <text class="title">
        你好
    </text>
    <text class="title">
        世界
    </text>
    <text class="title">
        鸿蒙
    </text>
</div>

.container {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}

.container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

5 align-content

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

• flex-start：所有行从交叉轴起点开始填充，默认值。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
• flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
• center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
• space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
• space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

目前没想到应用场景，以后要是遇到，再回补示例。

二 隐藏组件

如果希望隐藏组件，可以使用“display:none”或“visibility:hidden”。两者都能让组件不可见，不过两者也是有区别的，visibility:hidden是隐藏组件但是其他组件的布局不改变，相当于此组件变成透明；而display:none是不渲染组件，相当于将组件从页面中删除。

示例

<div class="container">
    <text class="title">
        你好
    </text>
    <text id="world" class="title world">
        世界
    </text>
    <text class="title">
        鸿蒙
    </text>
</div>

.world {
    visibility: hidden;
}

.world {
    display: none;
}