css3系列之彈性盒子 flex

楊耿發表於2019-07-19

彈性盒子(伸縮盒)

注意,本篇會很長,非常長, 因為彈性盒子的知識點比較多

搜尋 彈性盒子的屬性  ctrl + F   如果覺得圖太小, ctrl + +鍵

主要的屬性有:  (主要分兩部分講, 一部分講 設定在父元素上的屬性,一部分講 設定在子元素上的屬性, 還有最後一些簡單的應用)

  flex

  flex-grow

  flex-shrink

  flex-basis

  flex-direction

  flex-wrap

  align-content

  align-items

  align-self

  justify-content

  order

設定彈性盒子的屬性:

  display:flex    inline-flex  (這兩者的區別就是, 一個是 block   一個是 inline-block)

首先要注意的是:

  你給父元素設定了 display:flex  子元素們並不會改變成內聯元素。  雖然他們的效果看起來是, 但是實際上並不會改變。該是啥,還是啥

接下來來看一下,他的效果,及屬性和應用:

 

  首先,display: flex  是設定在 父元素上面的,設定之後, 他裡面的子元素,就會變成 彈性盒子了。(有些人,把父元素叫做盒子,把裡面的子元素叫做 專案)

接下來,幾個屬性, 都是設定在 父元素上面的:↓  

  flex: direction

 設定主軸的方向。 預設的主軸是 橫向 的,從左到右排列,另一條軸叫做 交叉軸,  也就是我們理解的縱向,

引數:

  row:預設值,主軸橫向的,從左向右排列

  row-reverse:主軸還是橫向的,只是裡面專案的 排列方式不一樣, 是從右向左的。

  column:把主軸變成 縱向的,排列方式 也就變成了,從上向下

  column-reverse:主軸變成 縱向的,排列方式顛倒, 從下向上排列。

 

  flex-wrap:
設定,子元素溢位,是否換行。

引數:

  nowrap:預設值(也就是不換行。子元素如果的寬  大於父元素的,會壓縮子元素)  把所有子元素排列在一行

  wrap:子元素溢位,會換行,變成多行的形式

  wrap-reverse:顛倒 wrap 的排列方式 (也會變成多行的形式)

 

  justify-content:

設定橫軸(橫向)的對齊方式

引數:

  flex-start:預設值 對齊起始位置,第一個子元素的起始位置,然後其他子元素向它看齊

  flex-end:跟上面相反的,也就是說,人家對齊在開始,這個對齊在 最後面

  center:居中對齊

  space-between:如果有多餘的空間,就會平均分佈,每個子元素的 兩邊空白空間保持一致(頭尾的子元素貼邊)

  space-around:如果有多餘的空間,就會平均分佈,每個子元素的 兩邊空白空間保持一致(頭尾的子元素不會貼邊)

 

  align-items: 

設定(縱軸)縱向的對齊方式:(單行)

引數:

   flex-start:預設值 對齊起始位置

  flex-end:跟上面相反的,也就是說,人家對齊在起始位置,這個對齊在 最下面

  center:居中對齊

  baseline:   基線對齊

  stretch:   如果沒有設定子元素高度,那麼全部子元素的高度都會被拉伸

 

既然學了縱向 和  橫向的對齊方式, 那麼現在就用他來設定 一下,我們平常的 居中功能

我們平常設定居中, 是不是要設定 position: 然後就left  calc  50% - 去子元素的 寬一半,  然後再去計算 top?  很麻煩對吧。 

看看以下的方法,是不是簡單了許多

 

  align-content:

align-content 跟上面的 align-items 的區別就是,一個是操作單行的,一個是操作多行的。  引數都是一樣的設定, 除了多了兩個 space-betwwen  ,space-around   

設定縱向的對齊方式(多行)

引數:

  flex-start:

  flex-end:

  center:  

  space-betwwen  

  space-around   

  stretch

 

接下來的幾個屬性,都是設定在 子元素上的

   align-self:

單獨設定對齊方式。如果父元素有設定 align-items的話, 會被子元素給替代掉,也就是,align-self 和 align-items同時設定, 會採用子元素的align-self 對齊方式

但是,如果是  align-self 和 align-content 同時設定, 會採用 父元素的 align-content的 對齊方式

引數:

  auto:預設值,也就是遵從 父元素 align-items 的對齊方式。

  flex-start:對齊起始位置

  flex-end:跟上面相反的,也就是說,人家對齊在起始位置,這個對齊在 最下面

  center:居中對齊

  baseline:   基線對齊

  stretch:   如果沒有設定子元素高度,那麼全部子元素的高度都會被拉伸

 

  order:

設定數值,來決定他們的排列順序

引數:

  0:預設值

  數值越小,越靠前  支援負數(-1)

 

  flex-grow:

設定數值來 自定義 擴充套件的比例,(不支援負值)

引數:

  預設值:0 (也就是,不用擴充套件)

 

  flex-shrink: (flex-shrink的真實計算公式)

設定子元素們的寬加起來大於 父元素寬時,要怎麼壓縮 成一行,

引數:

  1:預設值(超出的話,就按照 比例1 壓縮)

學了上面的那個 grow之後, 是不是覺得,他的計算公式那麼簡單, 那麼跟他對應的 shrink 計算公式也一樣?其實不是的,他的計算公式,有點冷門,乃至於w3c 都沒有公式,那麼多他的計算公式怎麼樣呢? 看下面的例子吧~

 

 

 還有最後一點,這也是最冷門的知識點。flex-shrink 參與計算的不是盒子的寬, 而是內容區的寬, border 和  padding 都不用加進去計算的。只計算content

 

  flex-basis:(如果使用了flex-direction 改變了主軸的方向,那麼他控制的,就變成了高度。不是寬度,也就是說,橫向控制寬度,縱向控制高度)

如果這個屬性呢, flex-basis: 100px  你這樣設定,他跟 width: 100px的效果是一樣的。 

其實把,flex-basis 和 width 兩個一起設定,是有用意的。flex-basis 是決定了 元素寬度的 最小值, width,是決定了元素寬度可撐開的 最大值。

 

還有最後的一個值:

  flex:

他是 flex-grow  flex-shrink flex-basis 的縮寫形式

  flex:1  1  20%;

代表的是,可以伸縮,該元素的最小寬度是 20%。

  

我們來利用,今天的全部內容來實現幾個案例。

  第一個:居中

  

    第二個:幾等分。

  第三個:其中一個固定寬度的佈局

 

  第四個:浮動

有人可能會問, float 不好嗎?  emmm 確實不好, 因為 父級會受浮動流的影響,而且會觸發bfc 等等。

 

  第五個: 聖盃佈局

 

相關文章