flex弹性布局

1. 什么是弹性布局？

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

2.flex布局常用属性

容器属性：

• flex-flow flex-direction和flex-wrap的简写结合，默认值为row nowrap
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
  元素属性：
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

3.元素说明

1.flex-direction属性 设置弹性元素排列反向，即主轴
取值：row(默认) | row-reverse | column | column-reverse

2.flex-wrap属性 设置弹性元素换行
取值：nowrap(默认) | wrap（换行） | wrap-reverse（反方向换行）



3. justify-content属性<