1. 程式人生 > >學習flex布局 資料總結

學習flex布局 資料總結

code 介紹 目的 space inline art 水平 數字 垂直

  

介紹:

flex布局,即是Flexible Box的縮寫,即是“彈性布局”或者“彈性盒模型”。

flex的指定:任何一個容器都可以指定為Flex布局

  anyContainer{  display:flex;    }

行內元素也可以指定為flex布局:將display取值改為inline-flex,行內的彈性布局

Webkit內核的瀏覽器,必須加上前綴才行-webkit-flex;

註意的是:設為 Flex 布局以後,子元素的floatclearvertical-align屬性將失效。

概念:

設為flex的容器,存在兩根軸,主軸交叉軸;這兩個軸的方向是水平還是豎直不一定。

主軸

,叫main axis(axis 軸,軸線),開始和結束的一頭分別叫main start和main end

交叉軸,叫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布局 資料總結