前言
在前端开发中，布局一直是一个比较麻烦的问题。传统的布局方式使用的是盒模型和浮动，但是这些方式过于繁琐，难以处理复杂的布局。而 CSS3-Flexbox 则是一种新的布局方式，它能够彻底解决布局问题，让开发者更加轻松地实现复杂布局。
什么是 CSS3-Flexbox？
CSS3-Flexbox 是 CSS3 中的一种新的布局方式，它是 Flexible Box 的缩写，也可以称为弹性盒子布局。它可以让开发者更加轻松地实现复杂布局，而不需要使用传统的盒模型和浮动。
CSS3-Flexbox 是一种基于容器和项目的布局方式。容器可以是任意元素，而项目则是容器的直接子元素。通过使用 Flexbox，我们可以指定容器中项目的排列方式、对齐方式、空间分配等等。
如何使用 CSS3-Flexbox？
使用 CSS3-Flexbox，我们需要先定义一个容器元素，并将其设置为 display: flex。这样，它就成为了一个 Flex 容器。接下来，我们可以通过设置容器的属性，来控制项目的排列方式、对齐方式、空间分配等等。
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}上面的代码定义了一个 Flex 容器，并设置了它的排列方式为水平方向、对齐方式为两端对齐、项目的垂直方向居中对齐。
Flex 容器的属性
下面是 Flex 容器的一些常用属性：
flex-direction
该属性决定了项目的排列方式。默认值为 row，表示水平排列。其他值包括 column（垂直排列）、row-reverse（反向水平排列）和 column-reverse（反向垂直排列）。
.container {
flex-direction: row-reverse;
}上面的代码将容器的排列方式设置为反向水平排列。
justify-content
该属性决定了项目在主轴上的对齐方式。默认值为 flex-start，表示左对齐。其他值包括 flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（项目之间的间隔相等，项目与容器边缘的间隔是项目间隔的一半）。
.container {
justify-content: center;
}上面的代码将容器的对齐方式设置为居中对齐。
align-items
该属性决定了项目在交叉轴上的对齐方式。默认值为 stretch，表示拉伸对齐。其他值包括 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）。
.container {
align-items: flex-end;
}上面的代码将容器的对齐方式设置为底部对齐。
flex-wrap
该属性决定了项目是否可以换行。默认值为 nowrap，表示不换行。其他值包括 wrap（换行，第一行在上）、wrap-reverse（换行，第一行在下）。
.container {
flex-wrap: wrap;
}上面的代码将容器的换行方式设置为换行。
align-content
该属性决定了多根轴线的对齐方式。该属性只有在多行项目的情况下才有效。默认值为 stretch，表示拉伸对齐。其他值包括 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、space-between（两端对齐，轴线之间的间隔相等）、space-around（轴线之间的间隔相等，轴线与容器边缘的间隔是轴线间隔的一半）。
.container {
align-content: center;
}上面的代码将容器的对齐方式设置为居中对齐。
Flex 项目的属性
下面是 Flex 项目的一些常用属性：
order
该属性决定了项目的排列顺序。默认值为 0，表示按照文档流的顺序排列。其他值为正整数或负整数，数值越小，排列越靠前。
.item {
order: 1;
}上面的代码将项目的排列顺序设置为 1。
flex-grow
该属性决定了项目在空间分配中所占比例。默认值为 0，表示不参与空间分配。其他值为正整数，表示所占比例。
.item {
flex-grow: 1;
}上面的代码将项目的比例设置为 1。
flex-shrink
该属性决定了项目在空间不足时的收缩比例。默认值为 1，表示按照比例收缩。其他值为 0，表示不收缩。
.item {
flex-shrink: 0;
}上面的代码将项目的收缩比例设置为 0。
flex-basis
该属性决定了项目在分配多余空间之前的初始大小。默认值为 auto，表示由项目自身的大小决定。其他值为长度值或百分比。
.item {
flex-basis: 100px;
}上面的代码将项目的初始大小设置为 100px。
flex
该属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。默认值为 0 1 auto，表示不参与空间分配、按照比例收缩、由项目自身的大小决定。
.item {
flex: 1 0 100px;
}上面的代码将项目的比例设置为 1，收缩比例设置为 0，初始大小设置为 100px。
align-self
该属性决定了项目在交叉轴上的对齐方式，覆盖容器的 align-items 属性。默认值为 auto，表示继承容器的 align-items 属性。其他值包括 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐）。
.item {
align-self: center;
}上面的代码将项目的对齐方式设置为居中对齐。
Flexbox 的优势
相比传统的盒模型和浮动，CSS3-Flexbox 有以下优势：
更加轻松的实现复杂布局
使用传统的盒模型和浮动，实现复杂布局需要经过繁琐的计算和调整。而使用 CSS3-Flexbox，我们可以通过简单的属性设置，就能够实现复杂的布局。
更加灵活的空间分配
使用传统的盒模型和浮动，空间分配是比较固定的。而使用 CSS3-Flexbox，我们可以通过设置项目的属性，来决定它们在空间分配中所占比例和收缩比例，从而实现更加灵活的空间分配。
更加方便的响应式布局
使用传统的盒模型和浮动，实现响应式布局需要编写大量的媒体查询。而使用 CSS3-Flexbox，我们可以通过设置容器的属性，来实现响应式布局，从而减少了编写媒体查询的工作量。
总结
CSS3-Flexbox 是一种新的布局方式，它可以让开发者更加轻松地实现复杂布局。通过灵活的属性设置，我们可以控制项目的排列方式、对齐方式、空间分配等等，从而实现更加灵活、方便的布局。如果你还在使用传统的盒模型和浮动来实现布局，那么赶快尝试一下 CSS3-Flexbox 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663e8b21d3423812e4cc48d2