Flex布局总结
目录一、基本使用二、主要的父容器属性（1）flex-direction设置子元素排列（2）justify-content设置子元素对齐方式（3）flex-wrap设置换行（4）align-items单行时设置子元素位置(5) align-content多行时设置子元素位置（6）flex-flow复合属性三、子项常用属性（1）flex设置子项的空间大小（2）align-self单独设置每个子项的位置
·
目录
一、基本使用
父容器与子容器
使用flex布局就是要将父容器设置为flex布局，之后便可控制子元素的布局。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局测试</title>
<style>
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
}
.container>span{
width: 150px;
height: 100px;
background: mediumpurple;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>效果：
二、主要的父容器属性
| 属性 | 描述 |
| flex-direction | 设置主轴的方向 |
| justify-content | 设置主轴上元素的排列方式 |
| flex-wrap | 设置子元素是否换行 |
| align-content | 设置侧轴上子元素的排列方式（多行） |
| align-items | 设置侧轴上子元素的排列方式 （单行） |
| flex-flow | 复合属性，相当于同时设置了flex-direction和flex-wrap属性 |
主轴默认沿x轴正方向，侧轴默认沿y轴负方向。
（1）flex-direction设置子元素排列
元素按主轴进行排列,默认为row
子元素，按列进行排列，如下：
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
flex-direction: column;
}
（2）justify-content设置子元素对齐方式
设置子元素在主轴上的排列方式，默认为flex-start
案例，设置右对齐，如下：
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: flex-end;
}
设置居中对齐，如下：
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: center;
}
平方剩余空间，如下：
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-around;
}
先两边贴边，再平方空间对齐，如下：
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
}
（3）flex-wrap设置换行
设置子元素是否换行，默认不换行，当子元素过多时即使设置了宽度子元素也会按比例收放排列。
设置五个已超过宽度的小的子元素，效果如下：
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
设置换行，效果如下：
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
f
（4）align-items单行时设置子元素位置
侧重的子元素位置(单行)
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-items: center;
}效果:
（5) align-content多行时设置子元素位置
设置侧轴上子元素的排列方式（多行），一般配合换行属性使用该属性
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}效果：
（6）flex-flow复合属性
相当于同时可以设置flex-direction和flex-wrap。
使用案例，如下：
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
/*flex-direction: column;*/
/*flex-wrap: wrap;*/
/*相当于上面两行的效果*/
flex-flow: column wrap;
}效果：
三、子项常用属性
| 属性 | 描述 |
| flex | 子项目占的份数 |
| align-self | 控制子项自己在侧轴的排列方式 |
| order | 定义了子项的排列顺序 |
（1）flex设置子项的空间大小
用来设置子项分配多少份空间，按照剩余的空间来分配。
使用案例如下：
<style>
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
}
.container>span:nth-child(1){
width: 150px;
height: 100px;
background: mediumpurple;
margin-right: 5px;
}
.container>span:nth-child(2){
width: 150px;
height: 100px;
background: red;
margin-right: 5px;
flex:1;
}
.container>span:nth-child(3){
width: 150px;
height: 100px;
background: blue;
margin-right: 5px;
}
</style>效果：
（2）align-self单独设置每个子项的位置
效果：
（3）order设置item顺序
使用案例：
<style>
.container{
display: flex;
width: 80%;
height: 300px;
background: pink;
justify-content: space-between;
align-content: space-between;
}
.container>span:nth-child(1){
width: 150px;
height: 100px;
background: mediumpurple;
margin-right: 5px;
order: 5;
}
.container>span:nth-child(2){
width: 150px;
height: 100px;
background: red;
margin-right: 5px;
order: 1;
}
.container>span:nth-child(3){
width: 150px;
height: 100px;
background: blue;
margin-right: 5px;
}
</style>效果：
总结完毕，flex布局能用到的就这些！
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)