使用方式：
在需要使用flex 的樣式表的選擇器中設(shè)置 display:flex;
html{
display: flex;
}
在父標簽上需要設(shè)置的內(nèi)容：
1扫倡、主軸方向
html{
display: flex;
flex-direction: ...;
}
flex-direction 的取值：
| value |
描述 |
| row |
主軸為橫向，方向為從左往右 |
| row-reverse |
主軸為橫向竟纳，方向為從右往左 |
| column |
主軸為縱向撵溃，方向為從上到下 |
| column-reverse |
主軸為縱向，方向為從下到上 |
| inherit |
從父標簽繼承 |
2锥累、子標簽在主軸上的對齊方式：
html{
justify-content: ...;
}
justify-content 的取值：
| value |
描述 |
| flex-start |
從主軸的開始端對齊 |
| flex-end |
從主軸的結(jié)束端對齊 |
| center |
在主軸上居中對齊 |
| space-around |
在主軸上平局分布缘挑，有等寬的間距環(huán)繞在元素兩端 |
| space-between |
起始和結(jié)束位置的元素會緊貼父標簽的邊緣，中間部分的元素等分間距 |
| inherit |
從父標簽繼承 |
3桶略、子標簽在副軸（與主軸垂直的交叉軸）上的對齊方式
html{
align-items: ...;
}
align-items 的取值：
| value |
描述 |
| flex-start |
從副軸的開始端對齊 |
| flex-end |
從副軸的結(jié)束端對齊 |
| center |
在副軸上居中對齊 |
| baseline |
元素的第一行文字的基線對齊 |
| stretch |
如果元素沒有設(shè)置寬/高或者auto 语淘，此值會讓元素占滿父元素的寬/高 |
| inherit |
從父標簽繼承 |
4、設(shè)置子元素是否換行:
html{
flex-wrap: ...;
}
flex-wrap 的取值：
| value |
描述 |
| nowrap |
不換行 |
| wrap |
換行 (換行际歼，意味著出現(xiàn)了多條主軸, align-content 生效) |
| wrap-reverse |
換行亏娜，并且第一行在下方(同上) |
5、設(shè)置多個主軸的對齊方式：
html{
// 當 align-content 生效蹬挺，也就是存在了多條主軸的情況下维贺，可以把每條主軸上的元素看為一個整體，每個整體在副軸上進行排列.
// 以下設(shè)置每個值的效果就等同于子標簽在主軸上的對齊效果（把軸線看做一個整體巴帮，多個整體的對齊效果）
// 比較繞溯泣，其實就跟在主軸上顯示子元素一樣，但實際上是在副軸上對齊的主軸榕茧。
align-content: ...;
}
align-content 的取值：
| value |
描述 |
| flex-start |
從副軸的開始端對齊 |
| flex-end |
從副軸的結(jié)束端對齊 |
| center |
在副軸上居中對齊 |
| space-around |
在主軸上平局分布垃沦，有等寬的間距環(huán)繞在元素兩端 |
| space-between |
起始和結(jié)束位置的元素會緊貼父標簽的邊緣，中間部分的元素等分間距 |
設(shè)置在子標簽上的屬性
1用押、設(shè)置元素的排列順序：
div {
// order 取值是無單位的整數(shù)肢簿，數(shù)值越小，該元素的位置就越靠前蜻拨，默認為 0
order: ...;
}
2池充、設(shè)置元素占用父標簽的范圍大小：
div {
// flex 是 flex-grow, flex-shrink, flex-basis 的簡寫缎讼，默認值為 0 1 auto 收夸；后兩個值可選，可以只設(shè)置前一個的值血崭，為無單位的整數(shù)卧惜；
// 可以理解為把父標簽等分了多個子元素 flex 值得總和的份數(shù)厘灼，每個子元素的 flex 值就代表了該元素占了父標簽份數(shù)的比例
flex: ...;
}
3、設(shè)置單個元素的對齊方式咽瓷，脫離同級標簽的對齊方式（讓某一個子元素顯得比較另類）
div {
// 當設(shè)置了這個屬性设凹，可以理解為在他的父標簽上設(shè)置的 align-items 對應(yīng)值的效果，單獨應(yīng)用到了該元素
align-self: ...;
}
align-self 的取值：
| value |
描述 |
| flex-start |
從副軸的開始端對齊 |
| flex-end |
從副軸的結(jié)束端對齊 |
| center |
在副軸上居中對齊 |
| baseline |
元素的第一行文字的基線對齊 |
| stretch |
如果元素沒有設(shè)置寬/高或者auto 茅姜，此值會讓元素占滿父元素的寬/高 |
以上便是個人對 flex 的簡單理解围来，歡迎指正。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
