一、flex布局的语法
块级元素 ：display: flex ———— 块级弹性伸缩盒显示容器盒模型
行内元素 ：display: inline-flex ———— 内联级弹性伸缩盒显示容器盒模型
设置flex布局后，flex item的float、clear和vertical-align 属性都失效
flex默认情况下，布局是横向的
二、容器属性
flex排列属性：
| 元素名称 | 说明 |
| flex-direction：column |
从上到下设置 |
| flex-direction：row |
设置从左到右排列 |
| flex-direction：row-reverse |
从右到左排列 |
| flex-direction：column |
从上到下设置 |
| flex-direction：column-reverse |
从下到上设置 |
#div{ display:flex; flex-direction：column }—————— 当子级flex1时，设置属性自动平均分没有设置子级flex为1时：flex-wrap
在没有设定高度的情况下，父级
| 元素名称 | 说明 |
| flex-wrap：nowrap |
默认值显示在一行或一列中 |
| flex-wrap：wrap |
当伸缩工程无法容纳时，自动换行 |
| flex-wrap：wrap-reverse |
当伸缩工程无法容纳时，自动换行，方向和 wrap 相反 |
当 flex-wrap: nowrap 时 ———— 默认值在一行或一列中显示：
当 flex-wrap：wrap 时 ————伸缩项目无法容纳时，自动换行 ：
当 flex-wrap：wrap-reverse 时 ———— 当伸缩工程无法容纳时，自动换行，方向和 wrap 相反 ：
flex-flow: row wrap; ———— 排列方向和换行可同时设置
伸缩属性：
| 元素名称 | 说明 |
| justify-content：flex-start |
伸缩工程的起点取决于齐全 |
| justify-content：flex-end |
伸缩项目以结束点靠齐 |
| justify-content：center |
伸缩工程中心点齐全 |
| justify-content：space-between |
伸缩工程平均分布 |
| justify-content：space-around |
伸缩工程平均分布，但两端空间保留一半 |
当justify-content：flex-start 时 ————伸缩工程的起点取决于齐全：
当justify-content：flex-end 时 ———— 伸缩工程在结束点靠齐 ：
当justify-content：center 时 ———— 伸缩工程中心点齐全 ：
当justify-content：space-between 时 ————伸缩工程平均分布 ：
当 justify-content：space-around 时 ———— 伸缩工程平均分布，但两端空间保留一半 ：
align-items属性： ———— 处理伸缩工程容器的额外空间
| 元素名称 | 说明 |
| align-itmes：flex-start |
伸缩工程以顶部为基准，清理下部额外空间 |
| align-itmes：flex-end |
伸缩工程以底部为基准，清理上部额外空间 |
| align-itmes：center |
伸缩工程以中部为基准，平均清理上下部额外空间 |
| align-itmes：baseline |
伸缩工程以基线为基准，清理额外空间 |
| align-itmes：stretch |
伸缩工程填充整个容器，默认 |
align-content属性： ————定义了多个轴对齐模式
align-content该属性设置排列方向并设置换行后，才能起作用。
它将拉伸每个项目的空间，填充方法将增加每个项目下方的空白，每个项目默认从容器顶部安排。
| 元素名称 | 说明 |
| align-content：flex-start |
与交叉轴的起点对齐 |
| align-content：flex-end |
与交叉轴的终点对齐 |
| align-content：center |
与交叉轴的中点对齐 |
| align-content：space-between |
与交叉轴两端对齐，轴线之间的间隔平均分布 |
| align-content：space-around |
每根轴线两侧的间隔都相等，所以，轴线之间的间隔比线与边框的间隔大一倍 |
| align-content：stretch |
轴线占满整个交叉轴 |
当 align-content：flex-start 时 ———— 与交叉轴的起点对齐 :
当 align-content：flex-end 时 ———— 与交叉轴的终点对齐 ：
当 align-content：center 时 ———— 与交叉轴的中点对齐 :
当 align-content：space-between 时 ———— 与交叉轴两端对齐，轴线之间的间隔平均分布 :
当 align-content：space-around 时 ———— 每根轴线两侧的间隔都相等，所以，轴线之间的间隔比线与边框的间隔大一倍：
当 align-content：stretch 时 ———— 轴线占满整个交叉轴
三、项目属性
<body>
<div id="box">
<div class="item">1111</div>
<div class="item">2222</div>
<div class="item">3333</div>
<div class="item">444</div>
</div>
</body> <style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 定义项目的排列顺序，数值越小排列越靠前，默认为0 */
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
width: 100px;
background-color: gold;
}
.item:first-child {
height: 20px;
margin-right: 10px;
order: 3;
}
.item:nth-child(2) {
height: 30px;
margin-right: 10px;
}
.item:nth-child(3) {
height: 70px;
margin-right: 10px;
order: 0;
}
.item:last-child {
height: 50px;
margin-right: 10px;
order: 2;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
background-color: gold;
flex-grow: 1;/* 分配剩余平均空间 ，
平均分配的含义是，去掉内容后的空间进行均分，
如果本身内容多，虽然均分，但还是占比较大空间*/
}
.item:first-child {
height: 20px;
}
.item:nth-child(2) {
height: 30px;
}
.item:nth-child(3) {
height: 70px;
}
.item:last-child {
height: 50px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
width: 200px;
background-color: gold;
}
.item:first-child {
height: 20px;
flex-shrink: 0;
/* 不缩放 */
}
.item:nth-child(2) {
height: 30px;
}
.item:nth-child(3) {
height: 70px;
flex-shrink: 5;
/* 严重缩放 */
}
.item:last-child {
height: 50px;
}
</style><style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置同一行内排列属性，默认值为平均分配 */
#box {
width: 600px;
height: 300px;
margin: 100px auto;
background-color: plum;
display: flex;
}
.item {
height: 50px;
text-align: center;
border: 1px solid aqua;
background-color: gold;
/* 第一步：平均分配剩余空间 */
flex-grow: 1;
}
.item:first-child {
background-color: #FFFF00;
/* 第二步，想占多少地方，可以设置宽度 */
-width: 150px;
flex-basis: 150px;
-flex-basis: 40%;
-flex-basis: 20rem;
}
.item:nth-child(2) {
background-color: chocolate;
/* 第三步：默认值auto */
flex-basis: auto;
}
.item:nth-child(3) {
background-color: #008000;
}
.item:last-child {
background-color: red;
}
</style> <style type="text/css">
*{margin: 0;padding: 0;box-sizing: border-box;}
#box{
width: 600px;height: 300px;margin: 100px auto;
background-color: skyblue;
display: flex;
align-items: center;
}
.item{
background-color: red;
border: 1px solid yellow;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
flex: 1;
}
.item:first-child{
background-color: gold;
}
.item:nth-child(2){
background-color: chocolate;
align-self: flex-start;
-align-self: flex-end;
-align-self: baseline;
-align-self: stretch;
}
.item:last-child{
background-color: green;
align-self: flex-end;
}
</style>