深入探讨 CSS Flexbox
内容提要
本文深入讲解了CSS Flexbox的用法，介绍了其术语、属性和实例，以及其在响应式设计中的作用。下一讲将介绍CSS Grid的使用。
延伸解读
理解Flexbox的轴线概念
Flexbox布局的核心在于主轴和交叉轴。主轴由flex-direction决定，默认为水平方向；交叉轴则垂直于主轴。justify-content控制项目在主轴上的对齐，而align-items控制项目在交叉轴上的对齐。理解这两条轴的区别，是掌握Flexbox对齐属性的关键，也能避免混淆不同属性的作用方向。
换行与多行对齐的配合
当flex-wrap设置为wrap时，项目可以换行到多行。此时，align-content属性用于在交叉轴上对齐多行整体，而align-items则作用于每一行内部的项目对齐。如果容器只有单行，align-content不会生效。因此，在需要多行布局时，合理搭配flex-wrap和align-content才能实现预期的行间距和分布效果。
响应式画廊中的弹性计算
文章中的照片画廊示例使用flex-basis: calc(25% - 20px)让每行显示四个项目，并通过媒体查询在屏幕小于768px时改为50%宽度，小于600px时改为100%宽度。这种基于百分比和calc()的弹性计算，结合gap属性，可以轻松实现不同屏幕下的自适应列数，体现了Flexbox在响应式设计中的实用性。
Flexbox的适用场景与局限
Flexbox擅长一维布局，即沿主轴排列项目，适合导航栏、工具栏、卡片列表等。但对于复杂的二维网格布局，Flexbox可能不够直观。文章提到下一讲将介绍CSS Grid，并比较两者在构建复杂布局方面的异同。因此，在实际项目中，应根据布局需求选择合适工具，或结合使用两者。
Q&A
什么是CSS Flexbox，它的主要用途是什么？
CSS Flexbox是'灵活盒子布局'的缩写，是一种CSS布局模块，主要用于设计响应式和灵活的布局，适应不同屏幕尺寸。
如何使用flex-direction属性控制项目排列方向？
flex-direction属性控制flex项目的排列方向，默认是横向排列，可以设置为row、row-reverse、column或column-reverse。
justify-content属性有什么作用？
justify-content属性用于沿主轴对齐flex项目，提供多种对齐方式，如flex-start、flex-end、center等。
如何使用Flexbox创建响应式照片画廊？
可以通过设置.flex-container为display: flex，并使用flex-wrap和justify-content属性来创建响应式照片画廊，调整每个项目的宽度以适应不同屏幕。
flex-wrap属性的作用是什么？
flex-wrap属性允许flex项目在必要时换行，提供nowrap、wrap和wrap-reverse等选项。
Flexbox在响应式设计中有哪些优势？
Flexbox是响应式设计的强大工具，可以通过媒体查询轻松调整布局，适应不同设备的屏幕尺寸。
