前言
在网页布局中，有一个重要的概念就是弹性布局（Flexbox）。相比于传统的布局方式，弹性布局更加灵活、自适应，并且支持移动端的开发。在实际的开发中，熟悉弹性布局的使用能够提高代码质量和开发效率。本篇文章将分享一些初学 Flexbox 的笔记，希望对初学者有所帮助。
弹性容器
Flexbox 布局需要先创建一个弹性容器，来给子元素提供弹性布局。这可以通过设置 display: flex 或者 display: inline-flex 来实现。其中 display: flex 会将容器设置为块状元素，而 display: inline-flex 会将容器设置为内联元素。
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container {
display: flex;
}
.item {
width: 50px;
height: 50px;
}上面的代码演示了一个简单的弹性容器和三个子元素。弹性容器的 display 属性设置为 flex，而子元素则使用了一个 50px * 50px 的盒子。这样的设置下，所有的子元素都会排成一行。
主轴和交叉轴
在弹性布局中，有两个重要的概念分别是主轴和交叉轴。主轴是指弹性容器设置的 flex-direction 属性所表示的方向，而交叉轴则是垂直于主轴的方向。
-- -------------------- ---- -------
---------- -
-------- -----
--------------- ---- -- ---- --
---------------- ------- -- ---- --
------------ ------- -- ------ --
-
----- -
------ -----
------- -----
------- -----
----------------- -----
-上述代码演示了如何设置弹性容器的主轴和交叉轴。其中主轴设置为 row，即水平排列；并通过 justify-content 设置居中对齐；交叉轴通过 align-items 实现纵向居中对齐。这样子元素之间就会有 10px 的间隔，并且整个容器也看起来更美观了。
弹性项目
在弹性容器中，子元素被称为弹性项目。弹性项目的布局方式可以通过一些属性来控制，例如 flex-grow、flex-shrink 和 flex-basis。其中 flex-grow 是指弹性项目在剩余空间中所占比例，flex-basis 是指弹性项目在主轴上的初始大小。
-- -------------------- ---- -------
----------------- -
---------- --
------------ --
----------- ------
----------------- -----
-
------------------ -
---------- --
------------ --
----------- ------
----------------- -----
-
---------------- -
---------- --
------------ --
----------- ------
----------------- -----
-上述代码演示了如何设置弹性项目的布局方式。其中第一个和最后一个弹性项目使用了相同的属性，因此它们会占用相同的空间。而第二个弹性项目的 flex-grow 和 flex-shrink 属性都设置为 2，所以它会比其他弹性项目占用更多的空间。
总结
弹性布局作为一种新的布局方式，相比于传统的布局方式具有更多的优势，包括自适应、灵活性以及适用于移动端开发。通过学习 Flexbox 的基础知识以及灵活运用相关的属性，开发者可以更加高效地完成复杂的布局任务，提高项目的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647446ad968c7c53b01a971b