什么是 Flexbox 布局
Flexbox 布局是一种 CSS 布局模式，它可以让我们更加方便地实现弹性的布局，适用于各种不同的屏幕尺寸和设备。Flexbox 布局的核心思想是将容器分为主轴和交叉轴两个方向，然后在这两个方向上进行布局。
Flexbox 布局的基本概念
在使用 Flexbox 布局时，我们需要先了解一些基本概念：
- Flex Container（容器）：使用 Flexbox 布局的元素称为容器，其中的子元素称为 Flex Item。
- Main Axis（主轴）：Flex Container 的主要方向称为主轴。
- Cross Axis（交叉轴）：垂直于主轴的方向称为交叉轴。
- Flex Item（项目）：Flex Container 中的子元素称为项目，每个项目都可以设置自己的宽度、高度、对齐方式等属性。
Flexbox 布局的属性
下面是一些常用的 Flexbox 布局属性：
Flex Container 属性
- display：设置元素的显示方式为 flex 或 inline-flex。
- flex-direction：设置主轴的方向，可选值为 row（默认值，从左到右）、row-reverse（从右到左）、column（从上到下）和 column-reverse（从下到上）。
- flex-wrap：设置是否允许项目换行，可选值为 nowrap（默认值，不换行）、wrap（换行，第一行在上方）和 wrap-reverse（换行，第一行在下方）。
- justify-content：设置项目在主轴上的对齐方式，可选值为 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目两侧的间隔相等）。
- align-items：设置项目在交叉轴上的对齐方式，可选值为 flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、baseline（基线对齐）和 stretch（默认值，拉伸对齐）。
- align-content：设置多行项目在交叉轴上的对齐方式，可选值和 justify-content 相同。
Flex Item 属性
- flex-grow：设置项目的放大比例，默认值为 0，即不放大。
- flex-shrink：设置项目的缩小比例，默认值为 1，即如果空间不足，项目会自动缩小。
- flex-basis：设置项目的基准值，可以是一个长度（如 100px）或一个百分比（如 50%）。
- flex：设置项目的三个属性值，分别为 flex-grow、flex-shrink 和 flex-basis，可以使用 flex: 1; 来设置所有值。
- order：设置项目的排列顺序，数值越小，排列越靠前，默认值为 0。
实例演示
下面是一个简单的 Flexbox 布局示例：
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------------- ------------ ------- ------- ------ ----------------- -------- - ----- - ------ ----- ------- ----- ----------------- ----- ------ ----- ----------- ------- ------------ ----- -
上面的代码将三个项目放在一个容器中，容器使用 Flexbox 布局，并设置了 justify-content 和 align-items 属性，使项目在水平和垂直方向上都居中对齐。效果如下：
总结
Flexbox 布局是一种非常实用的 CSS 布局模式，可以让我们更加方便地实现弹性的布局效果。在实际开发中，我们可以根据具体需求灵活运用 Flexbox 布局的各种属性，来创建出更加美观和实用的网页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3d9582b3ccec22fc4597d