弹性布局（flexbox）通过设置容器属性实现灵活排列与对齐。一、设置flex容器：使用display: flex或inline-flex，子元素自动按行排列，默认从左到右，可通过flex-direction调整方向。二、主轴与交叉轴：主轴默认水平方向，交叉轴垂直方向，flex-direction可改变主轴方向。三、常用对齐方式：justify-content控制主轴对齐，如flex-start、center、space-between；align-items控制交叉轴对齐，如stretch、center、flex-start；align-self可单独设置某子项对齐。四、多行布局：flex-wrap允许换行，align-content控制多行间距。掌握这些核心概念与属性，即可高效实现响应式布局。
弹性布局（Flexbox）是现代网页设计中最常用的一种布局方式，它能帮助我们更灵活、高效地对页面元素进行排列、对齐和分配空间。特别是在响应式设计中，flexbox表现得非常出色。
下面我来一步步说说怎么用HTML和CSS实现弹性布局，并讲解flexbox的基本使用方法。
一、什么是Flex容器？
要使用flexbox，首先需要设置一个Flex容器。也就是你希望里面的子元素按照弹性规则来排列的那个父元素。
立即学习“前端免费学习笔记（深入）”；
做法很简单：在CSS中给父元素加上 display: flex; 或者 display: inline-flex;。
.container {
display: flex;
}这样，.container里的所有直接子元素就变成了Flex项目（flex items），它们会自动按行排列，默认从左到右。
小贴士：如果你希望主轴方向是竖着的，可以加一句 flex-direction: column;，这时候子元素就会从上往下排。
二、Flex布局的主轴与交叉轴
Flexbox有两个核心概念：主轴（main axis） 和 交叉轴（cross axis）。
- 默认情况下，主轴是水平方向（从左到右）
- 交叉轴则是垂直方向（从上到下）
理解这两个轴的方向很重要，因为很多属性比如对齐方式都是围绕这两个轴展开的。
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
你可以通过 flex-direction 来改变主轴方向：
.container {
display: flex;
flex-direction: row; /* 默认值，从左到右 */
flex-direction: row-reverse; /* 反向，从右到左 */
flex-direction: column; /* 从上到下 */
flex-direction: column-reverse; /* 从下到上 */
}三、常用的Flex对齐方式
Flexbox的强大之处在于它的对齐功能。常见的有以下几种设置：
1. 主轴上的对齐：justify-content
这个属性控制的是子元素在主轴方向上的对齐方式。
.container {
display: flex;
justify-content: flex-start; /* 默认值，靠左对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 元素之间留空隙 */
justify-content: space-around; /* 每个元素周围留空隙 */
}2. 交叉轴上的对齐：align-items
这个控制的是单行元素在交叉轴上的对齐方式。
.container {
display: flex;
align-items: stretch; /* 默认值，高度撑满容器 */
align-items: center; /* 垂直居中 */
align-items: flex-start; /* 靠顶部对齐 */
align-items: flex-end; /* 靠底部对齐 */
}如果想让某个子项单独设置对齐方式，可以用 align-self 覆盖全局的 align-items 设置。
四、多行Flex布局：flex-wrap
默认情况下，flex容器中的子元素会被压缩在一行显示。如果你希望它们换行显示，就需要用到 flex-wrap。
.container {
display: flex;
flex-wrap: wrap; /* 子元素超过宽度时自动换行 */
}结合 flex-wrap 和 align-content 还可以控制多行之间的间距：
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* 多行之间留空隙 */
}基本上就这些了。Flexbox虽然看起来有很多属性，但只要掌握好主轴和交叉轴的概念，再配合几个常用属性，就能快速做出各种灵活的布局。刚开始用的时候可能会有点不习惯，但熟练之后你会发现它真的很方便。
