定義一個彈性盒子:
父容器設(shè)置:
display: flex | inline-flex
伸縮流方向,即定義主軸:
flex-direction: row | row-reverse |column | column-reverse(分別是從左往右, 從右往左, 從上往下, 從下往上)
伸縮換行:
flex-wrap: nowrap | wrap | wrap-reverse(分別是單行顯示,多行顯示, 多行顯示并沿與主軸垂直方向翻轉(zhuǎn)(話說為啥需要這東西))
伸縮流方向與換行(即上面兩個屬性寫到一起)
flex-flow: <flex-direction> || <flex-wrap>
主軸對齊justify-content:
用來定義伸縮項目沿著主軸線的對齊方式.(當(dāng)一行的所有伸縮項目都不能伸縮或可伸縮但已到達(dá)最大長度時,這一屬性才會對伸縮容器額外空間進行分配.當(dāng)伸縮項目溢出某一行時,這一屬性也會在項目的對齊上施加一些控制)(表現(xiàn)為一行放不下時,即多行排列,或者溢出)
justify-content: flex-start |flex-end |center |space-between |space-around
center:
space-between:平均分布,兩端不留間隙
space-around: 平均分布,兩端間隙平分
幾個關(guān)鍵字: 沿著主軸方向, 多行(一行不存在對齊行為), 垂直居中(center), 默認(rèn)是flex-start
側(cè)軸對齊 align-items
align-items: flex-start| flex-end |center | baseline |stretch
類似于 justify-content;
center:
flex-end:
baseline: 基線對齊
stretch: 默認(rèn)值
align-self: 單獨設(shè)置某伸縮項目在側(cè)軸的對齊方式,會覆蓋掉align-items,取值和align-items一樣
align-content (待補充)
flex: 是一個屬性簡寫, 包含flex-grow, flex-shrink, flex-basis.
一段css具體代碼:
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
/*空間足夠的時候，該div的寬度是200px屑迂，如果空間不足浸策，該div會變窄到100px，但不會再窄了惹盼。*/
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
/*無論窗口如何變化庸汗，我的寬度一直是200px。*/
}
.flex1 {
-webkit-flex: 1;
flex: 1;
/*改div會占滿剩余寬度的1/3手报。*/
}
.flex2 {
-webkit-flex: 2;
flex: 2;
/*改div會占滿剩余寬度的2/3蚯舱。*/
}
垂直居中的一段代碼
.vertical-container {
display: flex;
height: 300px; /*父容器*/
}
.vertically-centered {
margin: auto;
}
