flex弹性布局学习

一.起源：2009年W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。支持IE10+。

二.概念：

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以被指定为flex布局。

.box{
  display: flex;
}

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

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

三. 基本概念

四.容器属性：

• flex-direction |  flex-wrap  |  flex-flow  |  justify-content  |  align-item  |  align-content

       五. flex-direction

   row（默认值）：主轴为水平方向，起点在左端。

   row-reverse：主轴为水平方向，起点在右端。

   column：主轴为垂直方向，起点在上沿。

   column-reverse：主轴为垂直方向，起点在下沿。