CSS 佈局 （Flex 佈局）

原則

• flex佈局是首選方案，要支持IE8則用float佈局
• 不到萬不得已，不要寫死 width 和 height
• 儘量用高級語法，如 calc、flex
• 如果要滿足 IE，就全部寫死

Float

兒子全加 float
老子加 .clearfix
.clearfix簡單寫法

.clearfix:after{
  content: '';
  display: block;
  clear: both;
  }

IE寫法

.clearfix{
    zoom:1
}
.clearfix:after{
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    }

flex佈局

阮一峯

Flex 容器

display: flex | inline-flex;

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

• flex-direction

  容器默認存在兩根軸：水平的主軸→（main axis）和垂直的交叉軸↓（cross axis）。
  四個取值：

  • row （默認值）：→
  • row-reverse：←
  • column：↓
  • column-reverse：↑
• flex-wrap
  
  • nowrap（默認）：不換行。
  • wrap：換行，第一行在上方。
  • wrap-reverse：換行，第一行在下方。
• flex-flow
  
  • 簡寫上兩個屬性
  • flex-flow: <flex-direction> || <flex-wrap>;
• justify-content
  
  • 定義了項目在主軸上的對齊方式。
  • 具體對齊方式與軸的方向有關。
  • justify-content: flex-start | flex-end | center | space-between | space-around;
• align-items
  
  • 定義項目在交叉軸上（即另外一個軸）如何對齊。
  • align-items: flex-start | flex-end | center | baseline | stretch;

• align-content

  • 定義了多根軸線(即多行)的對齊方式。（把多行當成一個整體）
  • 確保多行的基礎flex-wrap: wrap;
  • 如果項目只有一行，該屬性不起作用。
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  Flex 項目

• flex-grow
  
  • 定義項目的放大比例，默認爲0。（空間過多時）
  • flex-grow: <number>;
• flex-shrink
  
  • 定義了項目的縮小比例，默認爲1，（空間不足時）
  • flex-shrink: <number>;
  • 如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。
• flex-basis
  
  • 在分配多餘空間之前，項目佔據的主軸空間（main size）。
  • flex-basis: <length> | auto; auto爲項目的本來大小。
• flex
  
  • 是flex-grow, flex-shrink 和 flex-basis的簡寫
  • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
• order
  
  • 定義項目的排列順序。數值越小，排列越靠前，默認爲0。
  • order: <integer>;（integer是整數的意思）

• align-self

  • 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

  Flex 平均佈局

  父元素加

display: flex;
justify-content: space-between;  

注意： 平均佈局時，消除容器兩邊多餘的padding或margin可以用負margin，但如果容器已經設置margin:0 auto;居中，需要再添加一個div去設置margin:0 -6px;最後記住給最外層容器添加overflow:hidden;防止滾動條出現。

延伸閱讀：
新的 CSS 特性正在改變網頁設計