什么是Flexbox？
Flexbox是一种新的CSS布局模式，旨在解决传统布局模式的局限性。简单来说，Flexbox允许您在一个容器中灵活地排列元素，使得更好的适应不同屏幕尺寸和设备。
Flexbox并不是完全取代了传统布局模式的所有方面，而是作为一种新的工具，可以更好地解决一些布局方面的限制和问题。
如何使用Flexbox？
为了使用Flexbox，您需要将元素的容器设置为display: flex。这将启用Flexbox布局。默认情况下，元素将从左到右（基于主轴）排列。然后，您可以使用其他Flexbox属性来自定义容器和元素之间的布局关系。
以下是一些常用的Flexbox属性：
容器属性
flex-direction
此属性用于定义Flexbox布局的主轴方向。默认值为row，表示从左到右。其他选项包括：
row-reverse：从右到左column：从上到下column-reverse：从下到上
justify-content
此属性用于定义沿着主轴的元素之间的对齐方式。可以设置以下值：
flex-start：元素沿主轴的起点对齐flex-end：元素沿主轴的终点对齐center：元素居中对齐space-between：元素之间平均分配间距space-around：元素周围平均分配空间
align-items
此属性用于定义侧轴（垂直）方向上的元素对齐方式。可以设置以下值：
stretch：元素沿侧轴拉伸以填充容器flex-start：元素沿侧轴的起点对齐flex-end：元素沿侧轴的终点对齐center：元素居中对齐baseline：元素基线对齐
flex-wrap
此属性用于定义是否允许元素换行。默认情况下，Flexbox会在一行上放置尽可能多的元素，然后缩小它们的宽度以适应容器。可以设置以下选项：
nowrap：不允许元素换行，溢出时将被缩小以适应wrap：允许在多行上放置元素，并根据需要缩小它们的宽度以适应wrap-reverse：允许在多行上放置元素，但是从反向方向开始
元素属性
flex-grow
此属性定义当容器空间有剩余时，元素在主轴方向上增长的比例。默认值为0，表示元素不会伸展。如果将值设置为1，则表示元素将尝试在空间允许的情况下最大程度地伸展。
flex-shrink
此属性定义当容器空间比元素总大小小的时候，元素在主轴方向上缩小的比例。默认值为1，表示元素将缩小以适合容器。如果将值设置为0，则表示元素不会收缩。
flex-basis
此属性定义元素最初的大小，它将影响主轴方向上的空间分配。默认情况下，该值为auto，表示元素将根据其内部内容的大小自动适应。您可以将它设置为像素值，百分比等。
以上是最常用的的属性，应该可以帮助您开始使用Flexbox了。然而，还有一些其他的属性可以帮助实现更高级的布局效果。
示例
以下是一些基本的Flexbox布局示例。
---------- - -------- ----- ---------- ----- ---------------- -------------- - ---- - ----------- ----- ------- ----- ----- - - ------ ------- ------ -
在此示例中，我们创建了一个Flex容器，指定了一些基本的属性。所有子元素都被放置在一行上，但是如果空间不足，则它们将根据需要进行换行。
每个盒子都具有相同的flex属性值，它们将以相同的比例在主轴上伸展。flex-grow属性为1，flex-shrink属性为0，flex-basis属性为200px。
总结
Flexbox是现代网站设计中不可或缺的布局工具。它具有强大的布局能力，可以自动响应不同的屏幕尺寸和设备，提供了更多有用的布局控制选项和更灵活的布局方式。我们建议每位Web开发者学习和使用Flexbox，并根据需要将其与传统的布局技术（如表格和浮动）结合使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664ea9f6d3423812e4f1bfe8