Flexbox 布局是一种快速简易地实现布局的方法，适用于响应式设计。在进行 Flexbox 布局时，有些注意点需要我们注意，尤其是当我们在设置父元素样式时。
弹性容器与弹性项
在 Flexbox 布局中，有两个概念，分别是弹性容器和弹性项。弹性容器是指一个元素，它的 display 属性被设置为 flex 或 inline-flex，而弹性项则指的是它的直接子元素。
我们需要将样式应用于弹性容器，而不是弹性项。因为在进行 Flexbox 布局时，只有弹性容器才是“弹性”的，它支持弹性的属性从而使弹性项得以在容器中进行灵活的布局。
以下是一个示例代码：
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
容器为 .container，因为它的 display 属性被设置为 flex。而上述的三个 div 元素则作为弹性项，因为它们是直接子元素。
弹性容器的属性
在进行弹性容器的样式设置时，有些属性可能对我们的 Flexbox 布局产生重大的影响。以下是一些要注意的属性：
display
display 属性用于定义元素显示类型，这在生成弹性容器时是关键的。我们需要将 display 属性设置为 flex 或者 inline-flex，以使元素成为弹性容器。
---------- - -------- ----- -
flex-direction
flex-direction 属性用于定义在弹性容器上的主轴方向，从而控制 flex 布局方向。默认是 row，即从左到右的水平排列。
----------- --------------- ---- -
justify-content
justify-content 属性用于设置主轴上元素之间的对齐方式，决定行内元素之间的间距和行与行之间的间距。
----------- ---------------- ------- -
align-items
align-items 属性用于设置元素在交叉轴上的对齐方式，这决定了列中元素之间以及列与列之间的间距。
---------- - ------------ ------- -
flex-wrap
flex-wrap 属性用于设置是否一行放不下时可以换行插入多行来显示元素。
---------- - ---------- ----- -
其它注意点
除了属性设置外，还有其他的注意点需要我们注意：
子元素的 flex 定位
Flexbox 布局中，每个弹性项都可以单独地指定 flex 定位，灵活地适应弹性容器布局。如果子元素同时指定了 flex-grow 和 flex-shrink 属性，就能更好地实现布局。
计算宽度和高度
弹性容器的默认宽度和高度都是由它最终包含的元素的大小和位置来决定的。我们可以设置它们的 width 和 height 属性，也可以使用 flex-basis 属性来定义元素的基础大小。
总结
Flexbox 布局是一种灵活简单的布局方法，但在进行布局时需要注意的细节不少，需要我们去深入理解。我们要了解弹性容器和弹性项的概念，注意指定弹性容器的属性，同时还要考虑到子元素的 flex 定位和计算宽度和高度等问题。只有完全掌握这些注意点，才能更好地使用 Flexbox 进行布局，并为之后的学习创造更好的前提。
示例代码：
---------- - -------- ----- --------------- ---- ---------------- ------- ------------ ------- ---------- ----- ------- ------ - ----- - ---------- -- ----------- ---- ------- ---- ----------- ------- ----------------- ----- ------- --- ----- ----- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0a68448841e9894cbb008