Flexbox（弹性盒子模型）是一种现代的 CSS 布局方式，可以更简单、灵活地实现网页布局。在过去的几年中，它已成为前端开发的行业标准。本文将介绍如何使用 Flexbox。
Flexbox 布局模型
Flexbox 是一种盒模型，它的布局是基于弹性元素的。利用 Flexbox，我们可以在任何方向上排列弹性元素（例如，水平或垂直）。Flexbox 容器是指一个包含了弹性元素的 HTML 元素。
概述
一般来说，Flexbox 主要包含以下元素：
- 容器 (display:flex)
- 项目 (flex)
- 主轴 (flex-direction)
- 次轴 (flex-wrap)
容器是包含所有项目的父元素。项目是容器中的所有元素，可以设置它们的大小与位置。主轴是弹性元素的排列方向，可以是水平或垂直方向。次轴是弹性元素在主轴上排不下时出现的方向。这些轴可以单独设置，但它们也可以一起工作。
容器
使用 Flexbox 布局，需要将容器设置为 display:flex;。这里显示的属性是一个简单的值，用于将容器变成 Flexbox 容器。
.container{
display: flex;
}如果你想从右到左布局，可以使用 display: inline-flex;。
项目
Flexbox 容器中的每个元素都被称为项目。
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div>
.container{
display: flex;
}
.item{
flex: 1;
}在这个例子中，Flexbox 的容器是包含三个项目的 <div>。每个项目都有一个类名 item。我们使用 flex: 1 属性来告诉浏览器每个弹性元素的宽度要相等。
主轴和次轴
Flexbox 的默认方向是水平的。如果你想垂直排列，请使用 flex-direction: column; 。此外，可以使用 justify-content 和 align-items 分别在主轴和次轴上调整元素的位置。例如：
.container{
display: flex;
flex-direction: row; /* 水平排列 */
justify-content: center; /* 主轴位置居中 */
align-items: center; /* 次轴位置垂直居中 */
}空间分配
Flexbox 会自动为项目分配剩余空间，无需指定它们的指标。在上述示例中，我们使用了 flex: 1 属性，它使每个项目在 Flexbox 容器内均分空间。如果我们想让某个项目使用更多的空间，可以将 flex 属性设置为较大的值。
可伸缩性
另一个强大的 Flexbox 功能是容器内弹性元素的可伸缩性。这意味着在视口大小变化时，元素的大小将自动调整。我们可以通过 flex-grow、flex-shrink 和 flex-basis 属性来自定义可伸缩性。
flex-grow: 增大未使用空间的弹性元素的大小。flex-shrink: 减小弹性元素的大小，以适应容器的大小，并防止项目溢出。flex-basis: 定义弹性元素的默认大小。
flex 属性的问题
通常，不建议给 flex 属性使用如 flex: 1 0 auto; 这样的简写方式。原因是不同的浏览器，对 auto 的解析不一样。
如果你想在代码中保持一致性，我们建议使用 flex-grow、flex-shrink 和 flex-basis 这三个属性来替代 flex 属性。
其他优秀的 Flexbox 布局示例
等高的左右布局
// javascriptcn.com 代码示例
<div class="container">
<div class="left">内容 A</div>
<div class="right">
<ul>
<li>内容 B1</li>
<li>内容 B2</li>
</ul>
</div>
</div>// javascriptcn.com 代码示例
.container {
display: flex;
}
.left {
flex: 1;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
}
.right ul {
flex: 1;
}这个例子使用了两个弹性元素，使其高度相等，ViewPager 中用的比较多。
使用 Flexbox 进行悬停效果
<div class="container"> <div class="box">悬停</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
flex: 1;
background-color: orange;
text-align: center;
font-size: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
transform: translateY(0);
transition: transform 0.5s ease;
}
.box:hover {
transform: translateY(-10px);
}这个例子是一个特别有趣的悬停效果，应用了 CSS Transition 和 CSS Transform 属性。
总结
Flexbox 布局方便，灵活，减少了代码冗余和麻烦。它可以帮助开发者高效地创建布局，减少代码中的 bug。本文章介绍了基础的、灵活、有用的 Flexbox 在 Web 中的使用方法，希望对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653df8a97d4982a6eb7939ce