flex网页布局我们通常都用css布局，传统解决方案，基于盒状模型，依赖 display 属性 + position属性

网页布局我们通常都用css布局，传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性，可以完美的解决你想要的页面样式，但是所需要的编码量往往会很多，今天我们来谈一谈flex布局。

浏览器兼容性：

flex（Flexible Box 的缩写，意为"弹性布局"）

div{ 
    display:flex  
}

!注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

容器的属性：

div{
  flex-direction: row | row-reverse | column | column-reverse;
}

div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

div{
  flex-flow: <flex-direction> || <flex-wrap>;
}

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

div{
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

div{
  align-items: flex-start | flex-end | center | baseline | stretch;
}

div{
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

结语：技术整理（flex项目属性可以看原文）