好程序員web前端分享CSS3彈性盒

好程序員web前端分享CSS3彈性盒

1、盒模型

box-sizing

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

box-sizing

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

border-box

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

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

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

2、彈性盒模型

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

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

 一、display:flex/inline-flex

說明：flex： 將對象做爲彈性伸縮盒顯示

          inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示

設置爲彈性盒（父元素添加）

1. flex-direction (主軸排列方向)

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

 row  默認橫向一行內排列

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

          column：縱向排列。

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

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

說明：

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

          ■ flex-start默認，頂端對齊

          ■ flex-end末端對齊

          ■ center居中對齊

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

          ■ space-around自動分配距離

 

四、flex-wrap

說明：

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

nowrap：flex容器爲單行。該狀況下flex子項可能會溢出容器

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

wrap-reverse：反轉 wrap 排列。

 

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

說明：

側軸對齊方式

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

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

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

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

          stretch：默認值。項目被拉伸以適應容器。

 

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

說明：

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

          ■ flex-start沒有行間距

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

          ■ center居中沒有行間距

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

          ■ space-around自動分配距離

          ■  stretch  默認值。項目被拉伸以適應容器。

 

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

說明：

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

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

 

 auto 默認值。元素繼承了它的父容器的 align-items 屬性。若是沒有父容器則 爲 "stretch"。

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

Center 元素位於容器的中心。

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

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

 

八、flex三個屬性值介紹

flex-grow

定義項目的放大比例，默認爲0，即若是存在剩餘空間也不放大

 

flex-shrink

定義了項目的縮小比例，默認爲1，即若是空間不足該項目將縮小。負值對該屬性無效。

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

flex-basis

項目的長度

 九、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」初始值

 十、order

說明：

number排序優先級，數字越大越日後排，默認爲0，支持負數。