CSS3 Flexbox 是一种新的布局模型，它可以帮助我们更加灵活地排列元素，使得页面的布局更加简单和易于维护。本文将详细介绍 CSS3 Flexbox 的使用方法和兼容性处理，帮助前端开发者更好地使用这一技术。
什么是 CSS3 Flexbox
Flexbox 是 Flexible Box 的缩写，意为“弹性盒子”。它是 CSS3 中的一种新的布局模型，可以实现在不同尺寸的屏幕上自适应的布局。使用 Flexbox 可以轻松地实现常见的布局需求，如水平居中、垂直居中、等高布局等。
Flexbox 中有两个关键概念：容器和项目。容器是指应用 Flexbox 布局的父元素，项目是容器中的子元素。容器通过设置 display: flex; 来启用 Flexbox 布局。
Flexbox 的基本使用
容器的属性
Flexbox 中，容器有许多属性可以控制项目的排列方式。下面是一些常用的属性：
- flex-direction：控制项目的排列方向，可选值为 row、row-reverse、column 和 column-reverse。
- justify-content：控制项目在主轴上的对齐方式，可选值为 flex-start、flex-end、center、space-between 和 space-around。
- align-items：控制项目在交叉轴上的对齐方式，可选值为 flex-start、flex-end、center、baseline 和 stretch。
- flex-wrap：控制项目是否换行，可选值为 nowrap、wrap 和 wrap-reverse。
- align-content：控制多行项目在交叉轴上的对齐方式，可选值与 justify-content 相同。
项目的属性
Flexbox 中，项目也有许多属性可以控制自身的排列方式。下面是一些常用的属性：
- order：控制项目的排列顺序，值越小越靠前。
- flex-grow：控制项目的放大比例，默认值为 0，表示不放大。
- flex-shrink：控制项目的缩小比例，默认值为 1，表示可缩小。
- flex-basis：指定项目的初始大小。
- flex：是 flex-grow、flex-shrink 和 flex-basis 的缩写。
- align-self：控制单个项目在交叉轴上的对齐方式，可选值与 align-items 相同。
示例代码
下面是一个简单的 Flexbox 布局示例：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex-basis: 100px;
height: 100px;
background-color: red;
}上面的代码实现了一个容器中有三个等宽的项目的布局，项目之间有间隔，且垂直居中。更多的 Flexbox 布局示例可以参考 Flexbox Froggy。
兼容性处理
虽然 Flexbox 是一种非常有用的布局模型，但是它的兼容性还不是很好。在一些老旧的浏览器中，Flexbox 的属性可能会不被支持或支持不完整，这就需要我们进行一些兼容性处理。
支持 Flexbox 的浏览器
目前大部分现代浏览器都已经支持了 Flexbox，包括 Chrome、Firefox、Safari、Opera 和 Edge。对于这些浏览器，我们可以直接使用 Flexbox 的属性来实现布局。
不支持 Flexbox 的浏览器
对于不支持 Flexbox 的浏览器，我们可以使用 autoprefixer 来自动添加浏览器前缀，以实现兼容性。
另外，我们还可以使用 Modernizr 来检测浏览器是否支持 Flexbox，从而进行相应的兼容性处理。具体代码如下：
if (Modernizr.flexbox) {
// 浏览器支持 Flexbox
} else {
// 浏览器不支持 Flexbox
}总结
CSS3 Flexbox 是一种非常有用的布局模型，可以帮助我们更加灵活地排列元素，使得页面的布局更加简单和易于维护。在使用 Flexbox 的时候，我们需要注意兼容性处理，以保证在所有浏览器上都能够正常显示。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6578389ad2f5e1655d21fbd3