1
传统布局 | flex布局 |
兼容性好 | 操作方便，布局极为简单，移动端应用很广 |
布局繁琐 | PC端浏览器支持情况较差 |
不能在移动端很好地布局 | IE 11或更低版本，不支持或部分支持 |
建议：
- 在PC端，使用传统布局
- 在移动端或者不考虑兼容性的PC端，使用flex弹性布局
2
flex初体验
本例子的关键之处在于：在父容器上指定布局方式为flex
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span></span>
<span></span>
<span></span>
</div>
3 flex布局原理
flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
☐ 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
☐ flex布局，又有很多其他叫法：伸缩布局、弹性布局、伸缩盒布局
采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。
上个例子中：
☐ div就是flex父容器
☐ span就是flex项目（span本身又是一个flex容器）
☐ flex项目可以横向排列也可以纵向排列
flex布局原理总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
4 flex布局父项常见属性
flex布局父项可以设置的属性：
☐ flex-direction：设置主轴的方向
☐ justify-content：设置主轴上的子元素排列方式
☐ flex-wrap：设置子元素是否（沿着主轴）换行
☐ align-content：设置侧轴上的子元素的排列方式（多行）
☐ align-items：设置侧轴上的子元素的排列方式（单行）
☐ flex-flow：复合属性，等价于同时设置了flex-direction和flex-wrap
5 flex-direction
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴
默认主轴方向就是x轴方向，默认侧轴方向就是y轴方向
主轴和侧轴是会变化的，通过flex-direction指定x或y为主轴。flex-direction设置谁为主轴，那么另外一个就是侧轴。而子元素是跟着主轴来排列的。
flex-direction属性值：
属性值 | 说明 |
row（默认值） | 设置x轴为主轴（y轴就是侧轴），子元素沿主轴从左到右排列 |
row-reverse | 设置x轴为主轴（y轴就是侧轴），子元素沿主轴从右到左排列 |
column | 设置y轴为主轴（x轴就是侧轴），子元素沿主轴从上到下排列 |
column-reverse | 设置y轴为主轴（x轴就是侧轴），子元素沿主轴从下到上排列 |
示例：
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
flex-direction: row-reverse;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
6 justify-content
justify-content属性用来控制项目（子元素）在主轴上的对齐方式。
属性值 | 说明 |
flex-start（默认值） | 从头部开始排列，如果主轴是x轴，从左到右 |
flex-end | 从尾部开始排序 |
center | 在主轴居中对齐，如果主轴是x轴，则水平居中 |
space-around | 在剩余空间之内均匀排列 |
space-bewteen | 先两边贴边，再在剩余空间之内均匀排列 |
示例1：
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
flex-direction: row;
justify-content: flex-end;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
示例2：
<style>
div {
display: flex;
width: 80%;
height: 500px;
background-color: pink;
flex-direction: column;
justify-content: flex-end;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
示例3：
<style>
div {
display: flex;
width: 80%;
height: 500px;
background-color: pink;
flex-direction: column-reverse;
justify-content: space-between;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
7
在flex布局下，当项目的总宽度超过容器的宽度时，项目的宽度会缩小：
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-direction: row;
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
8 flex-wrap
当子元素的总宽度超过容器的宽度时，flex-wrap用于控制子元素是否换行
属性值 | 说明 |
nowrap（默认值） | 不换行 |
wrap | 换行 |
示例1：
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
示例2：
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-direction: column;
justify-content: space-around;
flex-wrap: wrap;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
9 align-items
align-items用来控制子项在侧轴（默认y轴是侧轴）上的排列方式。适合在子项为单排的时候使用。
以下以侧轴为y来解释align-items属性的取值：
属性值 | 说明 |
flex-start | 从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中（垂直居中） |
stretch（默认值） | 拉伸 |
示例1：让元素在水平和垂直方向上同时居中
<style>
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
flex-direction: row;
justify-content: center;
align-items: center;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
示例2：拉伸。设置align-items的值为stretch，同时不要给子元素设置高度
<style>
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
div span {
width: 150px;
/* height: 100px; */
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
示例3：在主轴为y轴的情况下，让元素在水平和垂直方向上同时居中
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: pink;
flex-direction: column;
justify-content: center;
align-items: center;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
示例4：如果子元素有多排，align-items的效果是让多排元素保持间隔
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
10 align-content
align-content用来控制子项在侧轴（默认y轴是侧轴）上的排列方式。适合在子项为多排的时候使用。
在单排的情况下是没有效果的。
属性值 | 说明 |
flex-start（默认值） | 在侧轴的头部开始排列 |
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴均匀分布 |
space-between | 子项在侧轴先分布在两头，再均匀分布 |
strech | 设置子项元素高度平分父元素高度 |
示例1：
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-content: center;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
示例2：
<style>
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-content: space-between;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
align-content 和 align-items 的区别
- align-items适用于单排情况，且只有上对齐、下对齐、居中和拉伸
- align-content用于多排情况，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
11 flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
<style>
div {
display: flex;
width: 600px;
height: 300px;
background-color: pink;
flex-flow: column wrap;
}
div span {
width: 150px;
height: 100px;
background-color: #00b9f1;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
12 flex布局子项常见属性
- flex子项占的份数
- align-self控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
13 flex属性
flex属性用来定义子项目占用剩余空间的份数。
flex理解：
- 先计算出所有子元素的flex总和，把父容器的剩余空间按flex总和平分，分出的每一份都是相等大小的份
- 然后再根据每个子元素的flex的取值来分配份数
示例1：
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: auto;
justify-content: space-between;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: lightgreen;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
</section>
示例2：
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: auto;
justify-content: space-around;
}
section div:nth-child(1) {
flex: 1;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: lightgreen;
}
section div:nth-child(3) {
flex: 1;
background-color: blue;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
</section>
示例3：
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: auto;
justify-content: space-around;
}
section div:nth-child(1) {
flex: 2;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: lightgreen;
}
section div:nth-child(3) {
flex: 1;
background-color: blue;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
</section>
14 align-self
align-self控制子项目自己在侧轴上的排列方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
<style>
section {
display: flex;
width: 60%;
height: 400px;
background-color: pink;
margin: auto;
flex-direction: row;
justify-content: space-around;
}
section div:nth-child(1) {
width: 100px;
height: 100px;
background-color: red;
}
section div:nth-child(2) {
width: 100px;
height: 100px;
background-color: lightgreen;
align-self: center;
}
section div:nth-child(3) {
width: 100px;
height: 100px;
background-color: blue;
align-self: flex-end;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
</section>
15 order
order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0。
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: auto;
flex-direction: row;
justify-content: space-around;
}
section div:nth-child(1) {
width: 100px;
height: 100px;
background-color: red;
}
section div:nth-child(2) {
width: 100px;
height: 100px;
background-color: lightgreen;
order: -1;
}
section div:nth-child(3) {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
16 练习
