CSS3在布局方面做了非常大的改進,使得我們對塊級元素的布局排列變得十分靈活端仰,適應(yīng)性非常強捶惜,其強大的伸縮性,在響應(yīng)式開中可以發(fā)揮極大的作用荔烧。
主軸:Flex容器的主軸主要用來配置Flex項目吱七,默認是水平方向
側(cè)軸:與主軸垂直的軸稱作側(cè)軸汽久,默認是垂直方向的
方向:默認主軸從左向右,側(cè)軸默認從上到下
主軸和側(cè)軸并不是固定不變的踊餐,通過flex-direction可以互換景醇。
2、各屬性詳解****
1.flex子項目在主軸的縮放比例吝岭,不指定flex屬性三痰,則不參與伸縮分配
min-width? 最小值? ? ? min-width: 280px? 最小寬度? 不能小于 280
max-width: 1280px? 最大寬度? 不能大于 1280
2.flex-direction調(diào)整主軸方向(默認為水平方向)
flex-direction: column 垂直排列
flex-direction: row? 水平排列
http://m.ctrip.com/html5/? 攜程網(wǎng)手機端地址
3、justify-content調(diào)整主軸對齊(水平對齊)
子盒子如何在父盒子里面水平對齊
值描述白話文
flex-start默認值窜管。項目位于容器的開頭酒觅。讓子元素從父容器的開頭開始排序但是盒子順序不變
flex-end項目位于容器的結(jié)尾。讓子元素從父容器的后面開始排序但是盒子順序不變
center項目位于容器的中心微峰。讓子元素在父容器中間顯示
space-between項目位于各行之間留有空白的容器內(nèi)。左右的盒子貼近父盒子抒钱,中間的平均分布空白間距
space-around項目位于各行之前蜓肆、之間、之后都留有空白的容器內(nèi)谋币。相當(dāng)于給每個盒子添加了左右margin外邊距
4仗扬、align-items調(diào)整側(cè)軸對齊(垂直對齊)
子盒子如何在父盒子里面垂直對齊(單行)
值描述白話文
stretch默認值。項目被拉伸以適應(yīng)容器蕾额。讓子元素的高度拉伸適用父容器(子元素不給高度的前提下)
center項目位于容器的中心早芭。垂直居中
flex-start項目位于容器的開頭。垂直對齊開始位置 上對齊
flex-end項目位于容器的結(jié)尾诅蝶。垂直對齊結(jié)束位置 底對齊
5退个、flex-wrap控制是否換行
當(dāng)我們子盒子內(nèi)容寬度多于父盒子的時候如何處理
值描述
nowrap默認值。規(guī)定靈活的項目不拆行或不拆列调炬。? 不換行语盈,則 收縮(壓縮) 顯示? 強制一行內(nèi)顯示
wrap規(guī)定靈活的項目在必要的時候拆行或拆列。
wrap-reverse規(guī)定靈活的項目在必要的時候拆行或拆列缰泡,但是以相反的順序刀荒。
6、flex-flow是flex-direction棘钞、flex-wrap的簡寫形式
flex-flow:flex-directionflex-wrap;
白話記:? ? flex-flow: 排列方向? 換不換行;
兩個中間用空格
例如:
display:flex;
/* flex-direction: row;
flex-wrap: wrap; ? 這兩句話等價于下面的這句話*/
flex-flow:columnwrap;/* 兩者的綜合 */
7缠借、align-content堆棧(由flex-wrap產(chǎn)生的獨立行)多行垂直對齊方式齊
align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進行排列。
必須對父元素設(shè)置自由盒屬性display:flex;宜猜,并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行泼返,flex-wrap:wrap;這樣這個屬性的設(shè)置才會起作用。
值描述測試
stretch默認值宝恶。項目被拉伸以適應(yīng)容器符隙。
center項目位于容器的中心趴捅。
flex-start項目位于容器的開頭。
flex-end項目位于容器的結(jié)尾霹疫。
space-between項目位于各行之間留有空白的容器內(nèi)拱绑。
space-around項目位于各行之前、之間丽蝎、之后都留有空白的容器內(nèi)猎拨。
8、order控制子項目的排列順序屠阻,正序方式排序红省,從小到大
用css 來控制盒子的前后順序。? 用order 就可以
用整數(shù)值來定義排列順序国觉,數(shù)值小的排在前面吧恃。可以為負值麻诀。 默認值是 0
order:1;
此知識點重在理解痕寓,要明確找出主軸、側(cè)軸蝇闭、方向呻率,各屬性對應(yīng)的屬性值