Flexbox 布局是一种能够快速解决页面布局难题的 CSS 技巧。无论是面对移动端、PC 端，或是响应式布局，Flexbox 布局都能够帮助开发者快速构建出符合设计要求的页面布局。在本文中，我们将学习 Flexbox 布局的基本概念及相关知识点，并通过实际示例来对其进行深入学习和指导。
一、Flexbox 布局的基本概念
Flexbox 布局本质上是一种 CSS 盒子模型，它可以让页面元素像弹性盒子一样伸缩和排列。Flexbox 布局采用一种弹性网格布局，它可以自动调整各个元素的大小，并且可以根据不同视口大小显示不同的布局方式。Flexbox 布局的使用始于 CSS3 规范的出现，它是一种响应式布局的解决方案。
1.1 主轴和侧轴
Flexbox 布局采用了主轴和侧轴的概念，也就是页面元素的排列方式。主轴是页面元素沿着其所在的方向排列的线，侧轴则垂直于主轴排列。
1.2 主轴的方向
在 Flexbox 布局中，主轴的方向可以是从左到右，也可以是从上到下，这取决于 flex-direction 属性的设置。当 flex-direction 值为 row 时，主轴方向是从左到右，当值为 column 时，主轴方向是从上到下。
1.3 伸缩容器与伸缩项目
Flexbox 布局中有两个基本概念，分别是伸缩容器和伸缩项目。
伸缩容器：采用 Flexbox 布局的元素称为伸缩容器。默认情况下，伸缩容器的所有子元素都会采用 Flexbox 布局。
伸缩项目：伸缩容器的所有子元素称为伸缩项目。伸缩项目的大小和位置可以通过设置
flex属性来调整。
二、常用的 Flexbox 布局属性
了解了 Flexbox 布局的基本概念之后，我们来看一下常用的 Flexbox 布局属性：
display: flex;：将一个元素置为伸缩容器。flex-direction: row | row-reverse | column | column-reverse;：规定伸缩项目排列方向。flex-wrap: nowrap | wrap | wrap-reverse;：规定伸缩项目如何换行。justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;：设置主轴对应的对齐方式。align-items: flex-start | flex-end | center | baseline | stretch;：设置侧轴对应的对齐方式。align-content: flex-start | flex-end | center | space-between | space-around | stretch;：设置多行伸缩项目在侧轴方向的排列方式。flex-grow: <number>;：设置伸缩项目的比例，用于实现等宽布局或根据比例收缩和扩展。flex-basis: <length> | auto;：设置伸缩项目在主轴上的尺寸。flex-shrink: <number>;：设置伸缩项目在主轴上缩小的比例。
接下来，我们通过实际示例来对这些属性进行深入学习。
三、示例代码
3.1 等宽布局
在实际开发中，可能需要实现一个等宽布局，也就是页面元素的宽度均等。下面的代码演示了通过 flex-grow 属性来实现等宽布局：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
flex-grow: 1;
}在上面的代码中，我们通过 display:flex; 将 .flex-container 设置为一个伸缩容器，并通过 justify-content 的 space-between 值来让伸缩项目之间均匀分布。最后通过 flex-grow 属性来让伸缩项目等宽布局。
3.2 侧边栏布局
在实际的页面设计中，经常需要排版一个固定宽度的侧边栏及一个自适应内容区域。下面的代码演示了如何使用 Flexbox 布局实现侧边栏布局：
<div class="flex-container"> <div class="flex-item flex-sidebar">Sidebar</div> <div class="flex-item flex-content">Content</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- - ------------- - ------ ------ ----------------- ----- - ------------- - ---------- -- ----------------- ----- -
在上面的代码中，我们通过 display: flex; 将 .flex-container 设置为伸缩容器，通过给 .flex-sidebar 设置宽度来固定侧边栏的宽度，通过给 .flex-content 设置 flex-grow:1; 来让其自适应内容区域的大小。
四、总结
Flexbox 布局作为一种响应式布局的解决方案，在日常开发中拥有着广泛的使用。了解 Flexbox 布局的基本概念及相关属性是必不可少的，掌握这些规则之后，我们就可以通过 Flexbox 布局快速搭建符合设计要求的页面布局。如果你还没有掌握，那就赶快动手尝试一下吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468e0b7968c7c53b0903fb2