Flex弹性布局详解与用法

"flex弹性布局用法笔记，主要包括display:flex属性开启弹性布局，flex-direction定义主轴方向，flex-wrap控制是否换行，justify-content调整主轴上的对齐方式，align-items处理交叉轴上的对齐，align-content用于多行对齐，order指定元素顺序，flex-grow, flex-shrink和flex-basis定义项目的伸缩比例和基准大小，以及它们的兼容性和应用场景。" flex弹性布局是一种强大的CSS布局模式，允许开发者更加灵活地控制元素在容器中的排列和大小调整。使用`display: flex`开启弹性布局后，子元素的行为会发生显著变化，如不再遵循传统的块级元素行为，它们可以在一行内排列，且无需指定宽度也能自适应填充容器。 1. **flex-direction**：此属性用于定义主轴的方向，可选值包括`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）和`column-reverse`（从下到上）。主轴决定了元素的排列方向。 2. **flex-wrap**：控制子元素是否换行，`nowrap`表示不换行，`wrap`允许换行，`wrap-reverse`则是反向换行。配合`flex-direction`可以实现多列布局。 3. **flex-flow**：是`flex-direction`和`flex-wrap`的简写形式，可以快速设定两者。 4. **justify-content**：定义了沿主轴上的对齐方式，有`flex-start`（靠左/上），`flex-end`（靠右/下），`center`（居中），`space-between`（两端对齐，子元素间均匀间隔）和`space-around`（各元素两侧间隔相等）。 5. **align-items**：处理交叉轴上的对齐，如`stretch`（默认，拉伸填满容器），`center`（垂直居中），`flex-start`（靠上），`flex-end`（靠下）和`baseline`（基线对齐）。 6. **align-content**：仅在多行情况下有效，类似`align-items`，但作用于整个行组而不是单个元素。 7. **align-self**：允许个别子元素自定义其在交叉轴上的对齐方式，覆盖`align-items`的设置。 8. **order**：给子元素设置一个数值，决定它们在容器内的排列顺序，数值越小，位置越靠前。 9. **flex-grow**：设置元素的放大比例，用于分配多余空间，默认为0，表示不放大。 10. **flex-shrink**：当容器空间不足时，元素的缩小比例，用于收缩元素以适应空间。 11. **flex-basis**：设定元素在分配空间前的基础大小，可以是固定值或`auto`，影响`flex-grow`和`flex-shrink`的效果。 理解并熟练运用这些属性，可以创建出各种复杂的响应式布局，适配不同屏幕尺寸和设备。需要注意的是，虽然现代浏览器对flex布局支持良好，但在老版本的浏览器中可能需要添加前缀或使用其他兼容性解决方案。