響應式佈局【flex】

響應式佈局【flex】

來源於 響應式方法彙總

瞭解了以上響應式佈局，下面重點介紹一下 flex彈性佈局 ,很是有用,可是有記憶障礙的我，爲了下次還能順利的記起來，仍是總結一下吧，順便把我看的幾個博客內容和你們分享一下，寫的很是詳細，很好理解。

寫在前面--你須要知道的

1. 查看css屬性兼容性狀況

https://caniuse.com/

2. 盒子模型 box-sizing

• content-box(標準盒子模型)

width = content-width;

解析：當盒子內容寬度固定時，設置盒子的padding和border，盒子模型寬高會變大，向外擴展，實際content內容不變(注意：margin始終在盒子外)；

• border-box(IE盒子模型)

width = content-width + padding +border;

解析：當盒子內容寬度固定時，設置盒子的padding和border，盒子模型寬高不變，向內擴展，實際content內容變小(注意：margin始終在盒子外)；

3. 樣式兼容（postCss插件）

vscode 自動添加 css 兼容代碼插件

flex彈性佈局

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱」 容器」。它的全部子元素稱爲 Flex 項目（flex item），簡稱」 項目」。

注意，設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。

1. 彈性容器
display:flex;

2. 容器屬性

• justify-content------------項目在主軸上的對齊方式( 水平或垂直由flex-direction決定 )

  • flex-start ( 默認 居左 )
  • flex-end ( 居右 )
  • center( 居中 )
  • space-between( 兩端對齊項目之間的間隔都相等 )
  • space-around( 每一個項目兩側的間隔相等 )

• align-items------------交叉軸上如何對齊( 水平或垂直由flex-direction決定 )

  • stretch( 默認 若是項目未設置高度或設爲auto，將佔滿整個容器的高度 )
  • flex-start ( 對齊起點 )
  • flex-end ( 對齊終點 )
  • center( 對齊中點 )
  • baseline( 項目的第一行文字的基線對齊 )

• flex-direction------------決定主軸的方向

  • row( 默認 橫向排列 起點在左 )
  • row-reverse( 橫向排列 起點在右 )
  • column( 縱向排列 起點在頭【上】 )
  • row-reverse( 縱向排列 起點在尾【下】 )

• flex-wrap------------子元素是否換行

  • nowrap( 默認 不換行 )
  • wrap( 換行 )
  • wrap-reverse( 反向換行 )

• flex-flow------------<flex-direction> <flex-wrap>( flex-direction屬性和flex-wrap屬性的簡寫形式 )

  • 默認是 row nowrap

3. 項目屬性

• order

  order: <integer>/* default 0 */

  • JavaScript 語法：object.style.order="2"
  • 規定項目順序
  • 數值越小，排列越靠前
  • 默認值爲0

• flex-grow

  flex-grow: <number>; /* default 0 */

  • JavaScript 語法：object.style.flexGrow="5"
  • 規定項目的放大比例
  • 若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）.若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍.
  • 默認值爲0

• flex-shrink

  flex-shrink: number|initial|inherit; /* default 1 */

  • JavaScript 語法：object.style.flexShrink="5"
  • 定義了項目的縮小比例
  • 若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小.若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小.
  • 默認值爲1

• flex-basis

  flex-basis: number|auto|initial|inherit; /* default auto */

  • JavaScript 語法：object.style.flexBasis="200px"
  • 定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。
  • 它能夠設爲跟width或height屬性同樣的值（ep:300px），則項目將佔據固定空間.
  • 默認值爲auto

• flex

  flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;/* default 0 1 auto */

  • JavaScript 語法：object.style.flex="1"
  • 默認值爲0 1 auto

• align-self

  align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;/* default auto */

  • JavaScript 語法：object.style.alignSelf="center"
  • 定義單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。
  • 默認值爲auto,元素繼承了它的父容器的 align-items 屬性。若是沒有父容器則爲 "stretch"。

詳細主軸和交叉軸的理解請看：30分鐘完全弄懂flex佈局

佈局練習連接

codepan