实现弹性容器布局需设置display: flex或inline-flex，通过flex-direction定义主轴方向，justify-content和align-items控制对齐方式，flex属性调节子元素伸缩性，组合运用可构建响应式布局。
要实现弹性容器布局，核心是使用 CSS 的 Flexbox 模型。只需几个关键属性，就能轻松控制元素的排列、对齐和伸缩行为。
设置弹性容器
将一个容器设为弹性布局，需给父元素设置 display: flex 或 display: inline-flex。
• display: flex; —— 容器变为块级弹性容器，子元素在一行内排列• display: inline-flex; —— 容器为内联弹性容器，不独占整行
示例：
container {
display: flex;
}控制主轴方向
使用 flex-direction 决定子元素的排列方向。
立即学习“前端免费学习笔记（深入）”；
• row（默认）—— 从左到右水平排列• row-reverse —— 从右到左
• column —— 从上到下垂直排列
• column-reverse —— 从下到上
例如：
container {
display: flex;
flex-direction: column;
}设置对齐方式
通过以下属性控制元素在主轴和交叉轴上的对齐。
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
- flex-start, flex-end, center, space-between, space-around 等
• align-items：控制交叉轴对齐（如垂直方向）
- stretch（拉伸填满）, center, flex-start, flex-end, baseline
常用组合：
container {
display: flex;
justify-content: center;
align-items: center;
}这会让子元素在容器中水平垂直居中。
控制子元素的伸缩性
每个子元素可设置 flex 属性，控制其如何分配空间。
• flex: 1 —— 均匀占据可用空间• flex: 2 1 0 —— 分配更多空间，支持复杂伸缩规则
例如让两个子项等宽：
.item {
flex: 1;
}基本上就这些。灵活运用 display、flex-direction、justify-content、align-items 和 flex 属性，就能快速构建响应式、自适应的布局结构。不复杂但容易忽略细节。
