Flexbox 是 CSS 中一种用于布局的新特性，它可以非常简单地实现弹性布局，使得网页设计更加灵活、自适应。在本文中，我们将会详细介绍 Flexbox 的一些基本概念和属性，介绍如何使用 Flexbox 来实现弹性布局。
弹性布局基本概念
弹性布局是一种由 CSS3 引入的新型布局方式，它通过定义元素间的弹性关系，使得多个元素可以平铺在一个容器中，以适应各种屏幕尺寸和不同设备上的展示效果。
在弹性布局中，有三个基本概念要知道：
- 容器：包含要进行弹性布局的所有子元素。
- 项目：容器中的每个子元素，也称为 flex item。
- 轴线：容器内的主轴和交叉轴，其中主轴是弹性容器本身的“宽” 或 “高”，而交叉轴则垂直于主轴。
如上图所示，一个容器可以通过横向或纵向的主轴来排列它所包含的子元素。我们可以利用弹性布局来控制子元素的排列方式，同时可以在交叉轴上调整它们的对齐方式等。
Flexbox 的基本属性
使用 Flexbox 进行弹性布局，需要掌握以下属性：
- display: flex;
定义弹性容器，指定弹性容器内的子元素使用 flex 布局。
- flex-direction: row | row-reverse | column | column-reverse;
定义弹性容器的主轴方向。 row: 从左向右排列。 row-reverse: 从右向左排列。 column: 从上向下排列。 column-reverse: 从下向上排列。
- justify-content: flex-start | flex-end | center | space-between | space-around;
定义弹性容器的主轴对齐方式。 flex-start: 左对齐。 flex-end: 右对齐。 center: 居中对齐。 space-between: 两端对齐，项目之间的间隔相等。 space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与容器之间的间隔大一倍。
- align-items: flex-start | flex-end | center | baseline | stretch;
定义弹性容器的交叉轴对齐方式。 flex-start: 交叉轴起点对齐。 flex-end: 交叉轴终点对齐。 center: 居中对齐。 baseline: 项目的第一行文字的基线对齐。 stretch: 所有项目未设置高度或设为auto，将占满整个容器的高度。
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;
定义弹性容器内多个行或列的交叉轴对齐方式。 flex-start: 交叉轴起点对齐。 flex-end: 交叉轴终点对齐。 center: 居中对齐。 space-between: 两端对齐，项目之间的间隔相等。 space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与容器之间的间隔大一倍。 stretch: 默认值，占满整个容器。
- flex-wrap: nowrap | wrap | wrap-reverse;
定义子元素是否换行。 nowrap: 不换行。 wrap: 换行，第一行在上方。 wrap-reverse: 换行，第一行在下方。
- flex-flow: flex-direction | flex-wrap;
flex-direction 和 flex-wrap 的简写形式。
- order: <integer>;
定义弹性容器中的项目的排列顺序，数值越小的排在前面。
- flex-grow: <number>;
定义弹性容器中的项目放大比例，默认为0，即不放大。
- flex-shrink: <number>;
定义弹性容器中的项目缩小比例，默认为1，即空间不足对其进行缩小。
- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex 是 flex-grow, flex-shrink 和 flex-basis 三个属性的简写方式。 none: 不放大和缩小，flex-basis 取原尺寸值。
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
定义单个项目的交叉轴对齐方式，默认为auto，即按总体对齐方式对齐。
示例代码
首先，我们需要定义一个弹性容器：
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}这段代码定义了一个弹性容器，容器内的子元素将按每行居中，并且在需要的情况下进行换行。接下来，我们将添加一些项目，并使用父容器控制它们的布局：
<div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div>
-- -------------------- ---- ------- ----- - ------ -- ---------- -- ------------ -- ----------- -- - ----- - ------ -- ---------- -- ------------ -- ----------- -- - ----- - ------ -- ---------- -- ------------ -- ----------- -- - ----- - ------ -- ---------- -- ------------ -- ----------- -- - ----- - ------ -- ---------- -- ------------ -- ----------- -- -
这段代码定义了五个子元素，并设置了它们的排列顺序、放大缩小比例和尺寸基础值。其中，.box4 的 order 值最小，故最先显示，.box3 设置为容器右侧，.box2 和 .box5 的宽度相同，.box1 和 .box5 的宽度比其他项目要宽两倍。
接下来，为这些子元素添加一些样式：
-- -------------------- ---- ------- ------ ------ ------ ------ ----- - ----- ----- ------ ------ ------- ------ ------- ----- - ----- - ----------------- ----- - ----- - ----------------- ----- - ----- - ----------------- ----- - ----- - ----------------- ----- - ----- - ----------------- ----- -
这段代码为子元素的宽度、高度、间距以及背景颜色进行了定义。值得注意的是，这里我们使用了 flex: none;，即所有的子元素都不会放大和缩小，并且它们的尺寸基础值都为它们的原始尺寸。
通过上述代码，我们得到了以下效果：
总结
在本文中，我们详细介绍了 CSS Flexbox 的一些基本概念和属性。弹性布局是一个非常实用和常见的 CSS 布局方式，它可以极大地提高我们的网页设计效率，并且使用起来非常简单。希望这篇文章能对你掌握 CSS Flexbox 布局技术提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64730470968c7c53b008bf9e