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布局学习笔记