引言
CSS Flexbox 是一种布局方式，由于其灵活性和简便性，目前在前端开发中越来越受欢迎。本文将介绍 CSS Flexbox 的基本概念、使用方法和注意事项，希望能对初学者有所帮助。
概念
Flex Container
为了使用 Flexbox，我们需要把容器的 display 属性设置为 flex 或者 inline-flex。这个容器就是 Flex Container。
.container {
display: flex;
}Flex Items
Flex Container 中的子元素被称作 Flex Items。Flex Items 的默认宽度为其内容的宽度，可以通过设置 flex-grow、flex-shrink 和 flex-basis 属性，来调整它们的大小抑或优先级。
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.item {
flex-grow: 1; /* 等分 Flex Container 宽度 */
}Flex Axis
Flex Container 中有一个主轴和一个交叉轴，主轴的方向可以是水平的（左、右）或者垂直的（上、下），对应的两个轴线称为 Main Axis 和 Cross Axis。
-- -------------------- ---- ------- -- ---- -- ---------- - --------------- ---- - -- ---- -- ---------- - --------------- ------- -
行为
Flexbox 有以下几个常用属性：
justify-content：用于定义 Flex Items 在 Main Axis 上的对齐方式。align-items：用于定义 Flex Items 在 Cross Axis 上的对齐方式。flex-wrap：用于定义 Flex Items 的换行方式。align-content：用于定义多行 Flex Items 的对齐方式。
使用
水平居中
在某些情况下，我们需要用 Flexbox 让一个元素水平居中。比如一个固定宽度的盒子，在浏览器窗口内左右居中。
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ---- - ------ ------ ------- ------ -
垂直居中
同样的，我们可以用 Flexbox 让元素垂直居中。如果要让整个 Flex Container 垂直居中，我们还需要用到 align-items: center 属性。
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ---- - ------ ------ ------- ------ -
多列等分
Flexbox 很容易实现多列等分，只需要在 Flex Container 上设置 display: flex 和 justify-content:space-between 属性，就可以让所有 Flex Items 等宽并且保持等间距。
<div class="container"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ------- - ------ ---- ------- ------ -
注意事项
- Flex Container 可以包含多个 Flex Items。
- Flex Container 可以嵌套。
- Flex Container 中定义的 Main Axis 可能会受到其它 CSS 属性的影响而改变。
- 在一些旧的浏览器上，对于 Flexbox 的支持可能不完全一致，需要注意兼容性。
结论
CSS Flexbox 提供了非常简便的方法来实现布局。初学者可以从一些常用的场景入手，逐渐熟悉各种属性的作用。常用的 CSS 预处理器，如 Less、Sass 和 Stylus，也提供非常好的支持。希望本文能对你掌握 CSS Flexbox 有所帮助，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f28671a44b36ee57663a47