前言
在前端开发中，布局一直是一个核心问题。在过去，我们通常使用Float和Positioning方法来实现页面布局。但是这些方法有很多弊端，比如布局困难，脆弱，不方便等等。现在有越来越多的CSS布局属性被加入到W3C规范中，包括Flex和Grid布局。
在本文中，我将深入讲解Flexbox布局，这是CSS Grid的孪生兄弟。Flexbox和Grid布局在很多方面都有所不同，但它们互为补充，可以在不同场景下使用。
基础知识
什么是Flexbox布局?
Flexbox布局（也称弹性布局）是一种CSS布局模式，它提供灵活的、有效的一维布局，可以快速地实现复杂的布局需求。与传统的基于块级元素的布局方式相比，Flexbox布局更加容易、灵活。
如何使用Flexbox布局?
Flexbox布局是基于父元素和子元素的关系进行布局，我们需要设置父元素的display属性为flex或者inline-flex。
.parent {
display: flex;
}我们可以使用flex-wrap属性来定义flex容器内的子元素如何换行。默认值为no-wrap，表示不换行，还可以设置为wrap或者wrap-reverse。
.parent {
display: flex;
flex-wrap: wrap;
}容器属性
flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向），可以设置成row、row-reverse、column、column-reverse。
.parent {
flex-direction: row; /* 默认值 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}flex-wrap
flex-wrap属性决定项目如何换行。默认值为no-wrap，表示不换行，还可以设置为wrap或者wrap-reverse。
.parent {
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}justify-content
justify-content属性定义项目在主轴上的对齐方式，可以设置成flex-start、flex-end、center、space-between、space-around。
.parent {
justify-content: flex-start; /* 默认值 */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
}align-items
align-items属性定义项目在交叉轴上如何对齐，可以设置成flex-start、flex-end、center、baseline、stretch。
.parent {
align-items: stretch; /* 默认值 */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
}align-content
align-content属性定义多根轴线的对齐方式。如果只有一根轴线，则这个属性不起作用，可以设置成flex-start、flex-end、center、space-between、space-around、stretch。
.parent {
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
}项目属性
order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认值为0。
.item {
order: 2;
}flex-grow
flex-grow属性定义项目的放大比例，默认为0，即当容器空间充足时不放大。
.item {
flex-grow: 1;
}flex-shrink
flex-shrink属性定义项目的缩小比例，默认为1，即当容器空间不足时会缩小。
.item {
flex-shrink: 0;
}flex-basis
flex-basis属性定义项目占据主轴的空间。默认值为auto，即由项目的内容决定。
.item {
flex-basis: 50%;
}flex
flex属性是flex-grow、flex-shrink和flex-basis这三个属性的缩写形式。默认值为0 1 auto。
.item {
flex: 1 0 auto;
}align-self
align-self属性可以覆盖容器的align-items属性，定义单个项目在交叉轴上的对齐方式。
.item {
align-self: flex-start;
}实例
下面是一个Flexbox布局的实例，展示了如何使用Flexbox布局来实现左右两列，左侧的列宽为25%，右侧的列为75%。
<div class="wrap"> <div class="left">左侧列</div> <div class="right">右侧列</div> </div>
-- -------------------- ---- ------- ----- - -------- ----- ---------- ----- - ----- - ----- -- ----------- ---- - ------ - ----- -- ----------- ---- -
总结
本文深入介绍了Flexbox布局，包括容器属性和项目属性。Flexbox布局是一种强大的一维布局方式，可以帮助我们高效、快速地实现复杂的页面布局。
当然，Flexbox布局并不是万能的，它适用于一些简单的场景，而复杂的布局多用Grid布局。希望本文对你理解和使用Flexbox布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ce4818b5eee0b525627920