flex容器通过display:flex启用布局，flex-direction控制主轴方向，默认row；子元素用flex属性实现宽高自适应，如flex:1占剩余空间，align-items控制交叉轴对齐，stretch为默认值使子项拉伸填满容器，结合min-width等防止溢出，可实现响应式布局。
在使用 css Flexbox 布局时，容器和子元素的宽高自适应是常见需求。掌握 flex 相关属性和盒模型行为，能让你轻松实现灵活、响应式的布局。
Flex 容器的基本设置
要启用 Flex 布局，先给父元素设置 display: flex 或 display: inline-flex：
display: flex;
默认情况下，子元素会沿主轴（水平方向）排列。你可以通过以下属性调整主轴方向：
- flex-direction: row — 水平从左到右（默认）
- flex-direction: column — 垂直从上到下
- flex-direction: row-reverse / column-reverse — 反向排列
子元素的宽度自适应
让子元素根据内容或剩余空间自动调整宽度，主要依赖 flex 属性。它其实是 flex-grow、flex-shrink 和 flex-basis 的缩写。
立即学习“前端免费学习笔记（深入）”；
- flex: 1 — 子元素占据所有可用空间（常用于等分布局）
- flex: 0 1 auto — 不放大，可缩小，基于内容大小（默认值）
- flex: none — 固定大小，不参与弹性伸缩
例如，两个子元素分别设置 flex: 1 和 flex: 2，它们将按 1:2 的比例分配剩余空间。
高度自适应与对齐控制
当容器高度固定时，子元素可通过 align-items 控制交叉轴对齐方式：
- align-items: stretch — 默认值，子元素拉伸填满容器高度
- align-items: center — 垂直居中
- align-items: flex-start / flex-end — 顶部或底部对齐
若希望某个子元素不被拉伸，可单独设置其 align-self: flex-start 等值。
同时，使用 min-height 或 height 可控制容器最小或固定高度，子元素在 stretch 模式下会自动匹配。
实际应用示例
一个常见的卡片布局：
.container {
display: flex;
gap: 10px;
}
.item {
flex: 1;
min-width: 0; /* 防止内容过长溢出 */
}
.sidebar {
flex: 0 0 200px; /* 固定宽度200px，不伸缩 */
}
这里主内容区会自动填充剩余空间，侧边栏保持固定宽度，且整体高度自然对齐。
基本上就这些。合理使用 flex 属性和对齐方式，就能实现大多数自适应场景，无需计算具体尺寸。关键在于理解主轴与交叉轴的行为差异，以及每个 flex 子属性的作用。