flex
flex的主要內(nèi)容為 容器和項(xiàng)目 | 主軸和交叉軸
主軸 | 交叉軸（相對于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 設(shè)置項(xiàng)目在容器內(nèi)的分布
center疗绣、flex-start鳖谈、flex-start 設(shè)置項(xiàng)目在容器內(nèi)的位置
- align-items （相對于交叉軸）
center秩命、flex-start、flex-end 項(xiàng)目在容器內(nèi)的位置
baseline 所有的項(xiàng)目向第一個項(xiàng)目的基線進(jìn)行對齊
stretch 項(xiàng)目尺寸沿交叉軸的拉伸
更多的屬性
-
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
}
?
?
項(xiàng)目
常用：
flex：1
-
flex 是flex-grow捧存、flex-shrink、flex-basis縮寫
-
flex-grow 項(xiàng)目在空間剩余時擴(kuò)展寬度（默認(rèn)值為0即不擴(kuò)展）
單個項(xiàng)目 : grow < 1 擴(kuò)展大小為按grow值與剩余空間的比例計(jì)算
?????grow > 1 擴(kuò)展大小為全部剩余空間
多個項(xiàng)目: grow總和 < 1 每個項(xiàng)目擴(kuò)展大小為按grow值與剩余空間的比例計(jì)算
?????grow總和 > 1 每個項(xiàng)目按比例占據(jù)全部剩余空間
-
??計(jì)算方式： 剩余空間 * grow/grow總
??2.flex-shrink 項(xiàng)目在空間不足時收縮（默認(rèn)值為1即收縮）
?????單個項(xiàng)目: shirink < 1 項(xiàng)目不完全收縮官硝，將會溢出容器
?????????grow > 1 項(xiàng)目完全收縮
?????多個項(xiàng)目: grow總和 < 1 項(xiàng)目不完全收縮矗蕊，溢出容器
?????;????grow總和 > 1 項(xiàng)目不會溢出容器，項(xiàng)目尺寸為shrink比例
??計(jì)算方式： 寬度 x shrink/（shrink x 寬度）總和 x 需要收縮的寬度
??3. flex-basics 項(xiàng)目在空間中默認(rèn)的大小 （不一定是項(xiàng)目最后的大星饧堋）
???優(yōu)先級大于width
??4. flex ： [flex-grow | flex-shrink | flex-basis]
?????- 默認(rèn)值為 0 1 auto
?????- none 為 0 0 auto
?????- auto 為 1 1 auto
更多的屬性
- order [默認(rèn)值為0]
改變項(xiàng)目的排列順序傻咖，order越小越靠前
- align-self 設(shè)置項(xiàng)目自己在交叉軸位置 --- 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中會出現(xiàn)垂直margin合并，但在flex布局中不會合并
-
在flex中margin：auto為剩余空間的最大值
單個div在flex中設(shè)置margin:auto即可垂直水平居中
多個div在flex中設(shè)置margin:0 auto即可實(shí)現(xiàn)justify-content：space-between效果
<u>項(xiàng)目設(shè)置auto margin之后項(xiàng)目的align-self和容器的justify-content將不起作用</u>
3. flex-basis和width優(yōu)先級問題 flex-basic > flex-basis:auto > width
