CSS 布局一直是前端开发中的重要话题，而 Flexbox（弹性盒子布局）则是 CSS 布局的重要方式之一。相对于传统的基于盒模型的布局技术，Flexbox 可以更加简单高效地实现各种复杂布局。
本文将为您介绍如何用 Flexbox 深度学习 CSS 布局，包括：
- 什么是 Flexbox 以及它的优势；
- 如何使用 Flexbox 布局；
- 实例代码，帮助您快速掌握 Flexbox 布局。
什么是 Flexbox
Flexbox 是一种 CSS 布局模式，它可以帮助开发者更加灵活、高效地进行布局设计。相对于传统的 CSS 布局方式，Flexbox 可以更加准确、简单地对 HTML 元素进行定位和对齐，适用于各种复杂的网页布局场景。
相较于传统的 CSS 布局技术，Flexbox 布局有以下优势：
- 适用于各种网页布局场景，包括水平、垂直居中、自适应元素大小、多列等复杂场景；
- 简单易用，只需在父元素上添加
display: flex属性，子元素即可灵活自适应布局； - 极大地减少了使用浮动（float）和定位（position）带来的样式冲突和代码冗余；
- 可以通过
flex-direction属性来改变布局方向，使其适应不同的视口环境； - 可以通过
align和justify等属性来对子元素进行精确定位和对齐。
如何使用 Flexbox 布局
容器属性
使用 Flexbox 布局，需要将元素的 display 属性设置为 flex 或 inline-flex，这样它们就成为了 Flexbox 容器。一旦元素成为了 Flexbox 容器，就可以使用以下属性对容器内的子元素进行布局操作：
flex-direction: 设置主轴方向（默认值为row，表示横向排列）；flex-wrap: 是否允许换行（默认值为nowrap）；justify-content: 定义子元素在主轴上的对齐方式（默认值为flex-start）；align-items: 定义子元素在交叉轴上的对齐方式（默认值为stretch）；align-content: 定义多行子元素在交叉轴上的对齐方式（默认值为stretch）。
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}项目属性
使用 Flexbox 布局，容器内的子元素也可以使用以下属性进行布局操作：
flex-grow: 定义子元素在剩余空间上的扩展比例（默认值为0，不扩展）；flex-shrink: 定义子元素在空间不足时的收缩比例（默认值为1）；flex-basis: 定义子元素的初始大小（默认值为auto）；flex: 合并flex-grow,flex-shrink和flex-basis（默认值为0 1 auto）；align-self: 定义子元素在交叉轴上的对齐方式（默认值为auto）。
.item {
flex: 1 0 auto;
align-self: flex-end;
}实例代码
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------- ----- ---------------- ------- ------------ ------- -------------- ------- - ----- - ----- - - ------ ------- ------ ----------------- ---------- ------- ----- -
上述代码表示，使用 Flexbox 布局，父元素容器内分别有三个子元素元素，flex-direction: row 表示它们横向排列，flex-wrap: wrap 表示换行，justify-content: center 和 align-items: center 表示在父元素内部水平和垂直居中对齐。子元素使用 flex: 1 0 100px 表示在剩余空间上均分并占用 100 像素大小的空间，配合 margin: 10px 即可实现网际缝隙的布局效果。
总结
本文介绍了 Flexbox 布局的基本概念和使用方法，以及 Flexbox 的优势和常见应用场景。希望本文能够帮助各位开发者更加灵活、高效地应用 CSS 布局技术，为网页设计带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466f38d968c7c53b075f1ba