詳解Flex佈局

Flex佈局

flex 佈局是繼 標準流佈局 、 浮動佈局 、 定位佈局 後的第四種佈局方式。這種方式可以非常優雅的實現子元素居中或 均勻分佈,甚至可以隨着窗口縮放自動適應。 flex 佈局在瀏覽器中存在一定的兼容性。但是在小程序中,是完全兼容 flex 佈局的,並且微信官方也是推薦使用 flex 佈局的。

一些基本概念

在這裏插入圖片描述

  1. 彈性容器:包含着彈性項目的父元素。通過設置 display 屬性的值爲 flex 或 inline-flex 來定義彈性容器。
  2. 彈性項目(Flex item):彈性容器的每個子元素都稱爲彈性項目。彈性容器直接包含的文本將被包覆成匿名彈性 項目。也可以稱爲子容器。
  3. 軸(Axis):每個彈性框佈局包含兩個軸。彈性項目沿其依次排列的那根軸稱爲主軸(main axis)。垂直於主軸的 那根軸稱爲側軸(cross axis)。
  4. 方向(Direction):可以通過 flex-direction 來確定主軸和側軸的方向。

justify-content 設置在主軸上的排列方式

默認情況下,主軸的方向是從左到右。在主軸方向上,可以通過 justify-content 屬性來設置他們的排列方式。排列 方式有以下幾種:

  1. flex-start :項目靠近父盒子的左側。默認採用的就是這種排列方式。示例圖如下:
  2. flex-end :項目靠近父盒子的右側。
  3. center :所有項目會挨在一起在父盒子的中間位置。
  4. space-around :項目沿主軸均勻分佈,位於首尾兩端的子容器到父容器的距離是子容器間距的一半。
  5. space-between :項目沿主軸均勻分佈,位於首尾兩端的子容器與父容器緊緊挨着。
  6. space-evenly :項目在主軸上均勻分佈,收尾兩端的自容器到父容器的距離跟自容器間的間距是一樣的。

align-items設置在側軸上的排列方式

默認情況下,側軸的方向是從上到下。在側軸方向上,可以通過 align-items 屬性來設置他們的排列方式。排列方 式有以下幾種:

  1. flex-start :起始端對齊。默認就是這種對齊方式。
  2. flex-end :末尾段對齊
  3. center :中間對齊。
  4. stretch :如果項目沒有設置高度。那麼子容器沿交叉軸方向的尺寸拉伸至與父容器一致。
  5. baseline :基線對齊,這裏的 baseline 默認是指首行文字,所有子容器向基線對齊,交叉軸起點到元素基線 距離最大的子容器將會與交叉軸起始端相切以確定基線

flex-direction更換主軸和側軸方向

主軸默認的方向是從左到右,側軸的方向默認是從上到下,當然也可以進行修改。可以通過 flex-direction 進行修 改。可以修改的參數爲以下:

  1. row :默認屬性。從左到右。
  2. row-reverse :從右到左。
  3. column :從上到下。
  4. column-reverse :從下到上。

flex-wrap改變排列的方式

  1. nowrap :不換行。默認的。
  2. wrap :換行。
  3. wrap-reverse :換行,但是第一行會在下面。

align-content 確定排列的方式

  1. flex-start :從上往下排列。
  2. flex-end :末尾段對齊。
  3. center :中點對齊。
  4. space-between :與交叉軸兩端對齊,軸線之間的間隔平均分佈。
  5. space-around :每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
  6. stretch :默認方式,如果沒有給元素設置高度,那麼會佔滿整個交叉軸。

元素(子容器)的相關屬性

flex-basis:

定義了在分配多餘空間之前,項目佔據的主軸空間,瀏覽器根據這個屬性,計算主軸是否有多餘空間。

.item { flex-basis: <length> | auto; } 

默認值:auto,即項目本來的大小, 這時候 item 的寬高取決於 width 或 height 的值。 當主軸爲水平方向的時候,當設置了 flex-basis,項目的寬度設置值會失效,flex-basis 需要跟 flex-grow 和 flex- shrink 配合使用才能發揮效果。 當 flex-basis 值爲 0 時,是把該項目視爲零尺寸的,故即使聲明該尺寸爲 140px,也並沒有什麼用。 當 flex-basis 值爲 auto 時,則跟根據尺寸的設定值(假如爲 100px),則這 100px 不會納入剩餘空間。

flex-grow:

設置元素是否需要擴大的比例。默認值爲0,即如果存在剩餘空間,也不放大。

flex-shrink:

定義了項目的縮小比例,默認爲1,即如果空間不足,該項目將縮小

flex屬性:

flex屬性是 flex-grow flex-shrink flex-basis 三個屬性的簡寫。假設以上三個屬性同樣取默認值,則 flex 的默認值 是 0 1 auto 。 關於 flex 的取值,有以下幾種方式:

  1. auto :等價於 1 1 auto 。也就是允許增長,允許縮小,寬度爲自動。
  2. none :等價於 0 0 auto 。也就是不允許增長,不允許縮小,寬度爲自動。
  3. 非負數字:這個數字表示的是 flex-grow 的值, flex-shrink 爲1,表示允許縮小, flex-basis 爲0%。可以認爲 他就是把剩餘的空間進行填充。比如以下代碼是等價的:
 .item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } 
  1. 0 :對應的三個值分別爲 0 1 0% 。比如以下代碼是等價的:
 .item {flex: 0;} .item { flex-grow: 0; flex-shrink: 1; flex-basis: 0%; }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章