2019-07-26
① order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
② flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
③ flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
④ flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效。)
⑤ flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
此属性有两个快捷设置：auto=(1 1 auto)/none=(0 0 auto)
⑥ align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。
属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.father_box{
display: flex;
300px;
height: 300px;
background-color: yellowgreen;
}
.father_box div{
100px;
height: 100px;
background-color: hotpink;
border:1px solid black;
}
.son_box1{
order: 1;
/* box1就会跑到最后一位 默认值为0 */
/* flex-shrink: 0; */
/* box1 不会被挤压宽度 其余挤压更严重 默认值为1
所有div 都设置为0，并且宽度不够时， 多余div将挤出父容器
*/
}
.son_box2{
flex-basis: 100%;
/* box2将会占father_box总宽度的一半 */
}
.son_box3{
align-self: flex-end;
/* box3会从下面开始 */
}
.son_box4{
}
</style>
<body>
<div class="father_box">
<div class="son_box1">1</div>
<div class="son_box2">2</div>
<div class="son_box3">3</div>
<div class="son_box4">4</div>
</div>
</body>
</html>
1
2
3
4