好程式設計師 web 前端分享 CSS 3 彈性盒

一、 盒模型

box-sizing

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

box-sizing

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

border-box

為元素設定的寬度和高度決定了元素的邊框盒。

就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。

透過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

二、 彈性盒模型

佈局的傳統解決方案，基於盒模型，依賴 display 屬性 + position 屬性 + float 屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。

Flex 是 Flexible Box 的縮寫，意為 " 彈性佈局 " ，用來為盒狀模型提供最大的靈活性。

  1 、 display:flex/inline-flex

說明： flex ： 將物件作為彈性伸縮盒顯示

          inline-flex ：將物件作為內聯塊級彈性伸縮盒顯示

設定為彈性盒（父元素新增）

2、 flex-direction ( 主軸排列方向 )

說明： 順序指定了彈性子元素在父容器中的位置

　　　　  row   預設橫向一行內排列

          row-reverse ：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。

          column ：縱向排列。

          column-reverse ：反轉縱向排列，從下往上排，最後一項排在最上面

 3 、 justify-content( 主軸對齊方式 )

說明：

內容對齊（ justify-content ）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（ main axis ）對齊

          ■ flex-start 預設，頂端對齊

          ■ flex-end 末端對齊

          ■ center 居中對齊

          ■ space-between 兩端對齊，中間自動分配

          ■ space-around 自動分配距離

 

4 、 flex-wrap

說明：

該屬性控制 flex 容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

nowrap ： flex 容器為單行。該情況下 flex 子項可能會溢位容器

wrap ： flex 容器為多行。該情況下 flex 子項溢位的部分會被放置到新行，子項內部會發生斷行

wrap-reverse ：反轉 wrap 排列。

 

 5 、 align-items （側軸對齊方式）

說明：

側軸對齊方式

flex-start ：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

flex-end ：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

center ：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。

baseline ：如彈性盒子元素的行內軸與側軸為同一條，則該值與 'flex-start' 等效。其它情況下，該值將參與基線對齊。

          stretch ：預設值。專案被拉伸以適應容器。

 6 、 align-content （行與行之間對齊方式）

說明：

當伸縮容器的側軸還有多餘空間時，本屬性可以用來調整「伸縮行」在伸縮容器裡的對齊方式，這與調整伸縮專案在主軸上對齊方式的 <' justify-content'> 屬性類似。請注意本屬性在只有一行的伸縮容器上沒有效果。

          ■ flex-start 沒有行間距

          ■ flex-end 底對齊沒有行間距

          ■ center 居中沒有行間距

          ■ space-between 兩端對齊，中間自動分配

          ■ space-around 自動分配距離

          ■   stretch   預設值。專案被拉伸以適應容器。

 

 7 、 align-self （加給子元素）

說明：

align-self 屬性規定靈活容器內被選中專案的對齊方式。

注意： align-self 屬性可重寫靈活容器的 align-items 屬性。

 

 auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則   為 "stretch" 。

Stretch 元素被拉伸以適應容器。

Center 元素位於容器的中心。

flex-start    元素位於容器的開頭。

flex-end      元素位於容器的結尾。

 

8 、 flex 三個屬性值介紹

flex-grow

定義專案的放大比例，預設為 ，即如果存在剩餘空間也不放大

 

flex-shrink

定義了專案的縮小比例，預設為 1 ，即如果空間不足該專案將縮小。負值對該屬性無效。

收縮量的計算方式：（元素寬度 * 收縮比例 / 元素 * 收比例    相加） * 溢位寬度

flex-basis

專案的長度

 9 、 flex （ flex-grow ， flex-shrink 、 flex-basis ）

說明：

複合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間。

縮寫「 flex: 1 」 , 則其計算值為「 1   1   % 」

縮寫「 flex: auto 」 , 則其計算值為「 1   1   auto 」

flex: none 」 , 則其計算值為「 0   0  auto 」

flex: 0 auto 」或者「 flex: initial 」 , 則其計算值為「 0 1 auto 」，即「 flex 」初始值

 10 、 order

說明：

number 排序優先順序，數字越大越往後排，預設為 ，支援負數。