CSS Flexbox 布局模型是一种强大的工具，用于创建响应式和灵活的布局。它可以让我们更轻松地构建复杂的布局，而不必使用传统的浮动和定位技术。但是，使用 Flexbox 时，也有一些需要注意的技巧和限制。在本文中，我们将探讨 CSS Flexbox 的 5 个技巧和 5 个限制。
技巧
技巧一：使用 flex 属性控制元素的宽度和高度
Flexbox 使用 flex 属性控制元素的宽度和高度。这个属性接受三个值：flex-grow、flex-shrink 和 flex-basis。flex-grow 定义元素的扩展比例，flex-shrink 定义元素的收缩比例，flex-basis 定义元素的初始大小。
例如，下面的代码将创建一个具有 3 个元素的 Flexbox 容器，并将每个元素的宽度设置为相等的 33.33%：
.container {
display: flex;
}
.item {
flex: 1 1 33.33%;
}技巧二：使用 justify-content 和 align-items 属性控制元素的位置
Flexbox 还提供了 justify-content 和 align-items 属性，用于控制元素在容器中的位置。justify-content 属性定义元素在水平方向上的对齐方式，align-items 属性定义元素在垂直方向上的对齐方式。
例如，下面的代码将创建一个具有 3 个元素的 Flexbox 容器，并将元素在水平和垂直方向上都居中：
.container {
display: flex;
justify-content: center;
align-items: center;
}技巧三：使用 flex-wrap 属性控制元素换行
Flexbox 默认情况下不会换行，但是可以使用 flex-wrap 属性控制元素的换行方式。这个属性接受三个值：nowrap、wrap 和 wrap-reverse。nowrap 表示不换行，wrap 表示换行，wrap-reverse 表示反向换行。
例如，下面的代码将创建一个具有 6 个元素的 Flexbox 容器，并将元素在宽度超过容器时进行换行：
.container {
display: flex;
flex-wrap: wrap;
}技巧四：使用 order 属性控制元素的顺序
Flexbox 还提供了 order 属性，用于控制元素的顺序。这个属性接受一个整数值，表示元素的顺序。默认情况下，元素的顺序是它们在 HTML 中的顺序。
例如，下面的代码将创建一个具有 3 个元素的 Flexbox 容器，并将第三个元素放在第一位：
-- -------------------- ---- ------- ---------- - -------- ----- - ------- - ------ -- - ------- - ------ -- - ------- - ------ -- -
技巧五：使用 flex-direction 属性控制元素的方向
Flexbox 还提供了 flex-direction 属性，用于控制元素的方向。这个属性接受四个值：row、row-reverse、column 和 column-reverse。row 表示元素在水平方向上排列，row-reverse 表示反向排列，column 表示元素在垂直方向上排列，column-reverse 表示反向排列。
例如，下面的代码将创建一个具有 3 个元素的 Flexbox 容器，并将元素在垂直方向上排列：
.container {
display: flex;
flex-direction: column;
}限制
限制一：浏览器兼容性
Flexbox 是一个比较新的技术，不是所有的浏览器都支持它。特别是一些旧版本的浏览器，如 IE9 及以下版本，对 Flexbox 的支持非常有限。因此，在使用 Flexbox 时，需要考虑浏览器兼容性问题。
限制二：Flexbox 不适合所有的布局
虽然 Flexbox 可以非常方便地创建复杂的布局，但并不适合所有的布局。例如，当需要创建一个多列布局时，传统的浮动技术可能更为适合。
限制三：Flexbox 不支持多行垂直居中
Flexbox 提供了 justify-content 和 align-items 属性用于控制元素的位置，但是不支持多行垂直居中。这意味着，如果需要在多行元素中垂直居中，需要使用其他的技术。
限制四：Flexbox 容器的高度由子元素决定
Flexbox 容器的高度由子元素决定，这意味着当子元素的高度不同时，容器的高度也会发生变化。如果需要创建一个固定高度的容器，需要使用其他的技术。
限制五：Flexbox 不支持相对定位
Flexbox 不支持相对定位，这意味着当需要在 Flexbox 容器中对元素进行相对定位时，需要使用其他的技术。
结论
CSS Flexbox 布局模型是一个非常强大的工具，可以方便地创建响应式和灵活的布局。但是，在使用 Flexbox 时，需要注意一些技巧和限制。通过本文的介绍，相信大家对 CSS Flexbox 的使用和限制有了更深入的了解。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/677ad9555c5a933a341c2dba