在前端开发中，布局一直都是一个令人头疼的问题。特别是在响应式设计中，不同设备尺寸的适配问题使得布局方案更加复杂。而 Flexbox 布局正是一个非常强大且易于使用的解决方案。
本文将详细介绍 Flexbox 布局的属性以及应用场景，并提供实用的示例代码供学习与参考。
什么是 Flexbox 布局
Flexbox 布局是一种模块化的、灵活且适用于任何尺寸的布局方式，它可以使得容器（container）能够适应子元素（item）的不同尺寸。这意味着在设计响应式布局时，我们可以使用 Flexbox 布局来自动适配不同的设备尺寸和屏幕方向。
Flexbox 布局的核心是容器与子元素之间的关系，通过设置容器的属性和子元素的样式，我们可以实现各种各样的布局。下文将介绍 Flexbox 布局的属性以及应用场景。
Flexbox 布局的属性
Flexbox 布局的属性主要分为两类，一类是容器属性，另一类是子元素属性。
容器属性
display
display 属性用于定义元素的显示方式。在 Flexbox 布局中，我们需要将容器元素的 display 属性设置为 flex 来启用 Flexbox 布局。
.container {
display: flex;
}flex-direction
flex-direction 属性用于定义 Flexbox 布局的主轴方向。默认情况下，主轴方向是水平方向（row），我们可以通过设置 flex-direction 属性来让主轴方向变为垂直方向（column）。
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}justify-content
justify-content 属性用于定义 Flexbox 布局中主轴方向上子元素的对齐方式。默认情况下，子元素会从容器的起始位置开始排列。我们可以使用 justify-content 属性来将子元素居中、左对齐或者右对齐等。
.container {
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}align-items
align-items 属性用于定义 Flexbox 布局中侧轴方向上子元素的对齐方式。默认情况下，子元素会垂直居中对齐。我们可以使用 align-items 属性来让子元素顶部对齐、底部对齐或者基线对齐等。
.container {
display: flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}align-content
align-content 属性用于定义 Flexbox 布局中侧轴方向上多行子元素的排列方式。当容器中存在多行子元素时，我们可以使用 align-content 属性来定义各行子元素之间的空隙。
.container {
display: flex;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}子元素属性
flex-grow
flex-grow 属性用于定义子元素在分配空间时占用剩余空间的比例。默认情况下，子元素不会填充完整个容器，我们可以通过设置 flex-grow 属性来让子元素占用剩余空间。
.item {
flex-grow: 1;
}flex-shrink
flex-shrink 属性用于定义子元素在容器空间不足时缩小的比例。默认情况下，当容器空间不足时，所有子元素都会等比例缩小。我们可以通过设置 flex-shrink 属性来让子元素根据比例缩小。
.item {
flex-shrink: 2;
}flex-basis
flex-basis 属性用于定义子元素在分配空间前的初始尺寸。与 width 属性类似，我们可以使用 flex-basis 属性来指定子元素的初始尺寸。
.item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写形式。我们可以使用 flex 属性来同时设置这三个属性，以便更便捷地控制子元素的布局。
.item {
flex: 1 1 100px;
}order
order 属性用于定义子元素的排列顺序。默认情况下，子元素的排列顺序与 HTML 中的书写顺序一致。通过设置 order 属性，我们可以改变子元素的排列顺序。
.item {
order: 2;
}Flexbox 布局的应用
响应式导航栏
在响应式布局中，导航栏是一个非常重要的组件，而 Flexbox 布局可以非常方便地实现一个响应式导航栏。通过设置容器的 justify-content 属性，我们可以控制导航菜单的居中或靠左对齐，而通过子元素的 flex-grow 属性，我们可以让每个导航项自适应宽度。
<nav class="nav"> <a class="nav-item" href="#">Home</a> <a class="nav-item" href="#">About</a> <a class="nav-item" href="#">Blog</a> <a class="nav-item" href="#">Contact</a> </nav>
-- -------------------- ---- ------- ---- - -------- ----- ---------------- ------- ----------- ----- - --------- - ------ ----- ---------------- ----- -------- ----- ---------- -- ----------- ------- -
等高布局
在传统的网页布局中，往往需要使用 JavaScript 来实现等高布局。而在 Flexbox 布局中，我们可以非常简单地实现等高布局。通过设置容器的 align-items 属性为 stretch，所有子元素会自动填充容器的高度，从而实现等高布局。
<div class="container"> <div class="item">Lorem ipsum dolor sit amet.</div> <div class="item">Consectetur adipiscing elit.</div> <div class="item">Praesent sapien ex, bibendum a risus.</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ -------- - ----- - ------ ------- ----------- -------- -------- ----- ----------- ----------- -
总结
Flexbox 布局是一种非常强大的布局方式，可以灵活地适应不同设备尺寸和屏幕方向，同时也非常易于使用。在实际项目中，我们可以将 Flexbox 布局应用于响应式导航栏、等高布局等场景中，从而大幅提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0b9a1f6b2d6eab3bf0a8f