第十七天：弹性盒子

弹性盒子（Flexible Box，简称 Flexbox）是 CSS引入的一种一维布局模型，他专注于解决元素在单个维度（行或列）上的排列、对齐和空间分配问题，相比传统的浮动、定位布局，更简洁、灵活且易于维护，是前端开发中最常用的布局方式之一
Flexbox 的核心是「容器」和「项目」，所有布局操作都围绕这两个角色展开，且仅影响容器的直接子元素（孙子元素不受影响）
给元素设置 display: flex 或 display: inline-flex，该元素就会成为弹性容器，具备弹性布局的能力：
display: flex：容器为块级元素，会独占一行
display: inline-flex：容器为行内块元素，不会独占一行，宽度由内容决定
容器一旦开启 Flex 布局，其直接子元素会自动成为弹性项目
弹性项目
弹性容器的直接子元素，无论原本是块级、行内元素，都会被视为弹性项目，可通过项目属性单独控制自身的排列、尺度等表现
注意：Flexbox 的所有属性都围绕「主轴」和「交叉轴」展开
.form { display: flex; flex-direction: column; /* 主轴垂直，项目上下排列 */ gap: 15px; /* 项目间距 */ }
这行代码是确定主轴方向
 总结：
1. Flexbox 是一维布局，核心是「容器+项目+两根轴线」，灵活控制单维度排列与对齐；
2. 容器管“整体”：用 flex-direction 定方向，flex-wrap 定换行，justify-content 和 align-items 定对齐；
3. 项目管“个体”：用 order 改顺序，flex 控尺寸，align-self 改对齐；
4. 常用快捷值：flex: 1（均分空间）、flex: none（固定尺寸），记住这两个可解决 80% 布局需求。