Flexbox 是弹性盒子布局的简称，是一个旨在提供一种更加高效、优雅、灵活的布局方式的 CSS3 模块。它提供了一种利用弹性元素及弹性容器之间的关系，在不同方向上根据可用空间自动分配空间的方法。在当前许多页面布局中，使用 Flexbox 来进行布局已成为一种流行趋势。本文将着重介绍 Flexbox 布局的各种应用场景及如何实践它。
最基本的 Flexbox 布局
下面是一个基础的 Flexbox 布局，这个例子展示了如何将盒子水平居中：
<div class="flex-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ------- ------- ----- -
在上面这个例子中，我们将一个父级容器（.flex-container）设置成了 display: flex，这时候其中的所有子元素会被变成了可弹性伸缩的弹性元素。最后通过 justify-content: center; align-items: center 来实现水平居中。
Flex-direction 属性的使用
flex-direction 属性是控制弹性容器内部的排列方向的，它有四个可选参数：row（默认值），row-reverse，column，column-reverse。
<div class="flex-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ------------ - ----- - ------ ------ ------- ------ ----------------- ------- ------- ----- -
在上面这个例子中，我们将弹性容器的排列方向设置为 row-reverse，也就是从右到左排列。
Justify-content 属性的使用
justify-content 属性控制弹性项目在主轴上的对齐方式，它有五个可选参数：flex-start（默认值），flex-end，center，space-between 和 space-around。
<div class="flex-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ------- ------ ----------------- ------- ------- ----- -
在上面这个例子中，我们将弹性项目在主轴上的对齐方式设置为 space-between，也就是项目之间平均分配空间。
Align-items 属性的使用
align-items 属性控制弹性项目在交叉轴上的对齐方式，它有五个可选参数：stretch（默认值），flex-start，flex-end，center 和 baseline。
<div class="flex-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ------------ ----------- - ----- - ------ ------ ------- ------ ----------------- ------- ------- ----- -
在上面这个例子中，我们将弹性项目在交叉轴上的对齐方式设置为 flex-start，也就是所有项目都交叉在容器的起始边缘。
综合实践
看完上面的例子后，我们可以通过综合使用这些属性来进一步实践，创建出更为复杂的布局。下面是一个常见的导航栏布局：
<nav class="nav">
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Products</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>-- -------------------- ---- ------- ---- - -------- ----- ---------------- ------- - ----- - -------- ----- ---------------- -------------- ----------- ----- ------- -- -------- -- - ---------- - ------- - ----- - ---------- - - ---------------- ----- -
在上面这个例子中，我们通过设置 .nav 为一个弹性容器，然后将 .menu 设置为每个项之间均匀分布的弹性容器，最后通过 margin 设置每个菜单项之间的间距，从而实现了一个简单的导航栏布局。
总结
Flexbox 布局是一种灵活、高效、优雅的布局方式，其使用也越来越广泛。在实践中我们可以多加尝试，通过运用上面所介绍的属性来实现各类布局，同时也应该注重其兼容性和性能，以避免一些不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6897948841e989432e8a1