學習flex布局 資料總結
介紹:
flex布局,即是Flexible Box的縮寫,即是“彈性布局”或者“彈性盒模型”。
flex的指定:任何一個容器都可以指定為Flex布局
anyContainer{ display:flex; }
行內元素也可以指定為flex布局:將display取值改為inline-flex,行內的彈性布局
Webkit內核的瀏覽器,必須加上前綴才行-webkit-flex;
註意的是:設為 Flex 布局以後,子元素的float
、clear
和vertical-align
屬性將失效。
概念:
設為flex的容器,存在兩根軸,主軸和交叉軸;這兩個軸的方向是水平還是豎直不一定。
主軸
交叉軸,叫cross axis,開始和結束的一頭叫cross start 和 cross end。
外部容器的屬性:
①flex-direction
②flex-wrap
③flex-flow
④justify-content
⑤align-items
⑥align-content
它們分別的意思是:
①flex-direction 內部元素的排列方向(橫著排還是豎著排)
flex-direction:row、row-reverse、column、column-reverse
row
row-reverse
:主軸為水平方向,起點在右端。column
:主軸為垂直方向,起點在上沿。column-reverse
:主軸為垂直方向,起點在下沿。
②flex-wrap 內部元素太多了,在一條軸線上排不下了,換行嗎?怎麽換行?
flex-wrap:nowrap、wrap、wrap-reverse
nowrap
(默認):不換行
wrap
:換行,第一行在上方
wrap-reverse
:換行,第一行在下方
③flex-flow:是將①和②合起來簡寫
自然默認的是:flex-flow:row nowrap;
④justify-content:內部元素在主軸上的對齊方式(是都在中間、靠著main start、靠著main end、還是均勻分布)
justify-content: flex-start | flex-end | center | space-between | space-around;
⑤align-items:內部元素在交叉軸上的對齊方式:
align-items: flex-start | flex-end | center | baseline | stretch;
⑥align-content:多跟軸線下這個屬性派上用場,平常一根軸線沒用處。
flex-start
:與交叉軸的起點對齊。flex-end
:與交叉軸的終點對齊。center
:與交叉軸的中點對齊。space-between
:與交叉軸兩端對齊,軸線之間的間隔平均分布。space-around
:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。stretch
(默認值):軸線占滿整個交叉軸
內部元素的屬性,主要的有下面幾個:
order:項目的排列順序,數字越小越靠前,越大越往後排
flex-grow:放大比例(default:0)
學習flex布局 資料總結