Flex佈局實用手冊

Flex佈局

兼容寫法：

.flex-box{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex; 
  display: flex; 
}

.flex-row{
  -webkit-box-orient: horizontal;
  box-orient: horizontal;

  -webkit-flex-direction: row;
  flex-direction: row;
}

.flex-col{
  -webkit-box-orient: vertical;
  box-orient: vertical;

  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-justify{
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -moz-box-align: justify;
  -ms-flex-align: center;
  justify-content: space-between;
  align-content: center;
}

.flex-1{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex:1;
  box-flex: 1;
  flex:1;
}

注意知識點：

• 若是設置了flex-col佈局，而父容器不設置高度，那麼子項目顯示爲原內容高度
• flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
• 設置了Flex佈局，float, clear, vertical-align都將失效
• 瀏覽器現基本支持，IE10+
• display:flex和display:box有什麼區別？前者是flex 2012年的語法，也將是之後標準的語法，大部分瀏覽器已經實現了無前綴版本，後者是2009年的語法，已通過時，是須要加上對應前綴的

基礎學習&閱讀：

• Flex 佈局教程：語法篇
• Flex 佈局教程：實例篇
• css-box-flex屬性，而後彈性盒子模型簡介
• Flex佈局學習筆記