flex
flex的主要內容為 容器和項目 | 主軸和交叉軸
主軸 | 交叉軸（相對于flex-direction）
flex-direction: row 主軸-水平方向 | 交叉軸-垂直方向
flex-direction: row-reverse 主軸-水平方向從右向左
flex-direction: column 主軸-垂直方向 | 交叉軸-水平方向
flex-direction: column-reverse 主軸-垂直方向從下向上
容器
常用：
justify-content：center | space-around | space-between；
align-items： center；
- justify-content （相對于主軸）
space-around、space-between 、space-evenly 設置項目在容器內的分布
center、flex-start、flex-start 設置項目在容器內的位置
- align-items （相對于交叉軸）
center、flex-start、flex-end 項目在容器內的位置
baseline 所有的項目向第一個項目的基線進行對齊
stretch 項目尺寸沿交叉軸的拉伸
更多的屬性
-
flex-flow ： flex-direction | flex-wrap
flex-direction 決定主軸的方向
flex-wrap 是否換行
-
align-content 多行
flex-start | flex-end
space-between | space-around
stretch
.dad {
width:400px;
height: 70px;
display:flex;
background:#dedede;
justify-content:space-between;
align-items: center;
/* flex-direction: column; */
}
.dad > div{
background-color: #fedfed
}
.child2 {
flex:1;
margin:auto 10px;
background-color: #fedfed
}
.child3 {
width: 20px;
height: 30px;
background-color: #fedfed
}
.child {
width: 20px;
height: 40px;
background-color: #fedfed
}
?
?
項目
常用：
flex：1
-
flex 是flex-grow、flex-shrink、flex-basis縮寫
-
flex-grow 項目在空間剩余時擴展寬度（默認值為0即不擴展）
單個項目 : grow < 1 擴展大小為按grow值與剩余空間的比例計算
?????grow > 1 擴展大小為全部剩余空間
多個項目: grow總和 < 1 每個項目擴展大小為按grow值與剩余空間的比例計算
?????grow總和 > 1 每個項目按比例占據全部剩余空間
-
??計算方式： 剩余空間 * grow/grow總
??2.flex-shrink 項目在空間不足時收縮（默認值為1即收縮）
?????單個項目: shirink < 1 項目不完全收縮，將會溢出容器
?????????grow > 1 項目完全收縮
?????多個項目: grow總和 < 1 項目不完全收縮，溢出容器
?????;????grow總和 > 1 項目不會溢出容器，項目尺寸為shrink比例
??計算方式： 寬度 x shrink/（shrink x 寬度）總和 x 需要收縮的寬度
??3. flex-basics 項目在空間中默認的大小 （不一定是項目最后的大小）
???優先級大于width
??4. flex ： [flex-grow | flex-shrink | flex-basis]
?????- 默認值為 0 1 auto
?????- none 為 0 0 auto
?????- auto 為 1 1 auto
更多的屬性
- order [默認值為0]
改變項目的排列順序，order越小越靠前
- align-self 設置項目自己在交叉軸位置 --- align-content相同
.dad {
width:450px;
height: 700px;
display:flex;
background:#dedede;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
/* flex-direction: column; */
}
.dad > div{
width: 100px;
height: 100px;
margin:0 10px 10px 0;
background-color: #fedfed
}
更多flex
一般div中會出現垂直margin合并，但在flex布局中不會合并
-
在flex中margin：auto為剩余空間的最大值
單個div在flex中設置margin:auto即可垂直水平居中
多個div在flex中設置margin:0 auto即可實現justify-content：space-between效果
<u>項目設置auto margin之后項目的align-self和容器的justify-content將不起作用</u>
3. flex-basis和width優先級問題 flex-basic > flex-basis:auto > width
