CSS Flexbox 是一种响应式设计的布局模式，使得页面的布局可以更加自由和灵活。通过对 Flexbox 的学习，你将能够更好地掌握响应式设计的技巧，同时也将在前端开发中更加自如。
什么是 Flexbox
Flexbox 是一种新的排版模型，它被设计用来更好地控制和布局行和列。Flexbox 提供了一种简单的、灵活的布局方法，使得能够相对轻松地控制各种 HTML 元素的大小、位置和对齐方式。
Flexbox 的基本概念
Flexbox 排列元素是在容器内发生的。Flexbox 的一个重要特性就是使得容器能够更加灵活地控制内部元素的布局。它的基本思想是在容器内按照一定规则对元素进行排列，并对每个元素的大小和定位实现更精细的控制。
在 Flexbox 中，每个容器都有两个基本属性：flex-direction 和 flex-wrap。这些属性控制了容器内部的排列方式和为多余元素的布局提供策略。
flex-direction
flex-direction 属性决定了容器内部的排列方向。它可选的值包括：
- row：按照水平方向排列元素（默认值）；
- row-reverse：按照水平方向反向排列元素；
- column：按照垂直方向排列元素；
- column-reverse：按照垂直方向反向排列元素。
flex-wrap
flex-wrap 属性定义了当容器内所有元素排列完毕后，该如何布局超出容器宽度的元素。它可选的属性值包括：
- nowrap：元素都要尽可能地挤在容器内能够容纳的空间中并按需缩小；
- wrap：超过容器宽度的元素会换行，即在新的一行中以 row 的方向开始布局；
- wrap-reverse：原理同 wrap，但是在新的一行中以反向的 row 方向开始布局。
Flexbox 的基本用法
在容器内部使用 flex 属性和值是实现强大的 Flexbox 布局的关键。根据需要， flex 属性可以用于子元素，这样就能够控制它们在容器内的大小和定位。
flex-grow
flex-grow 属性决定了对应元素的大小，指定了它们在由一些元素组成的父容器内部所占据的比例。如果有多个子元素，那么 flex-grow 属性可以使其中一个元素在容器中放大，使其占据未使用空间的比例变大。
具体用法如下：
.item {
flex-grow: <number>; /* 定义值必须是一个整数 */
}flex-shrink
flex-shrink 属性与 flex-grow 相似，但作用是缩小元素以便适应容器的大小。如果一个容器太小了，那么这个属性可以在缩小元素时指定用于控制哪个元素更优先缩小。
具体用法如下：
.item {
flex-shrink: <number>; /* 定义值必须是一个整数 */
}flex-basis
flex-basis 属性决定了一个 Flexbox 图层的理想起始大小。经常与 flex-grow 或 flex-shrink 属性结合使用。
具体用法如下：
.item {
flex-basis: <width>; /* 定义值必须是一个尺寸（如 px、em 或 rem） */
}flex
其中 flex 属性可以在一个很短的声明中合并了 flex-grow、flex-shrink 和 flex-basis，定义了普通、可缩小和可扩展元素的特性。
具体用法如下：
.item {
flex: <number>; /* 此时 flex-grow 属性是 <number>，其他两个值都是 1 */
flex: none | auto | initial | inherit; /* 关闭和重置默认值 */
flex: <flex-grow> <flex-shrink> <flex-basis>; /* 允许手动定义各种属性的值 */
}Flexbox 的完整示例
现在来看一个用 Flexbox 做的完整 CSS 布局的示例：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- -- ------ -- ---------- ----- -- ------------------ ---- -- ---------------- -------------- -- --------- -- ------------ ------- -- ------ -- - ----- - ----- - - ---- -- ----------- --- ---- -- -------------- ----- -- ------ ---- --- -- -
以上示例展示了 Flexbox 的一些基本概念和用法，例如使用 flex-wrap 属性可使超出容器宽度的元素自动换行，使用 flex-grow 属性可定义一个元素的大小。掌握了 Flexbox 的知识以后，你将能够制作更加灵活和精细的满足响应式设计的页面。
总结
本文对于 Flexbox 的学习提供了详细的介绍，介绍了它的基本概念、属性和用法示例，使读者可以更容易地理解并调整布局方式以实现网站设计更加灵活、多样的效果。希望能够为前端开发者提供帮助，同时也希望读者可以根据所学掌握灵活运用此知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a10e7148841e9894d540c7