本文共 1078 字，大约阅读时间需要 3 分钟。

CSS基础知识

CSS3的基础知识即将完结，希望大家在这段学习之旅中有收获，也希望没有人中途放弃！接下来，让我们看看最后一部分内容吧。

怎样制作弹性盒子（Flexbox）？

弹性盒子是CSS中的一个强大工具，当页面需要适应不同屏幕尺寸的设备时，它能确保元素在不同设备上显示得恰到好处。要创建弹性盒子，首先需要设置display属性为flex，这样它就能成为一个弹性容器。接下来，我们来了解弹性容器和弹性子元素的关系。

弹性容器

一个弹性容器可以包含多个弹性子元素，这些子元素通常是水平排列的，默认情况下每个弹性容器只占一行。需要注意的是，弹性盒子只负责确定子元素在弹性容器内的布局方式。

改变弹性容器的排列方式也会影响到页面布局。比如，你可以设置direction: rtl，这样弹性子元素就会从右向左排列，这样页面整体布局也会随之改变。尝试一下，你会发现重新设置direction会带来意想不到的效果！

还有一个重要的属性是flex-direction，它决定了弹性子元素在父容器中的排列方式。根据需要，你可以设置为row（默认，左到右）、column（上到下）、row-reverse（右到左）或者column-reverse（下到上）。通过flex-direction的不同设置，你可以得到灵活多样的布局方式。

此外，弹性集合中的子元素也可以通过justify-content进行水平对齐，比如flex-start（先把子元素对齐到容器的起始边）、flex-end（对齐到容器的末端）或center（居中）等方式。这些属性都是布局空间控制的重要工具，灵活运用的话能够提升你的页面布局效果。类似的，vertical-align属性则用来控制子元素在弹性容器中垂直方向的对齐。需要注意的是，当flex-direction设置为column或column-reverse时，vertical-align会失效，统一适用于单行布局的情形。

弹性元素的排序与换行方式

在弹性布局中，除了排列方式外，还需要处理子元素的排序问题。这里，order属性可以用来指定元素的排列顺序，数值越小的排在前面。另外，flex-wrap属性控制子元素的换行方式，默认是nowrap（单行），如果需要多行布局，可以设置为wrap。需要注意的是，wrap