什么是flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

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

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

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

基本概念

穹器默认存在两根轴:水平的主轴( main axis )和垂直的交又轴( cross axis )。主轴的开始位置(与边框的交又点）叫做main start，结东位置叫做main end;交叉轴的开始位置叫做cross start，结东位置叫做cross end

flex-direction	属性决定主轴的方向（即项目的排列方向）
flex-wrap	默认情况下，项目都排在一条线（又称”轴线”）
flex-flow	属性用于设置或检索弹性盒模型对象的子元素排列方式
justify-content	属性定义了项目在主轴上的对齐方式
align-items	属性定义项目在交叉轴上如何对齐。
align-content	属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

`order`	定义项目的排列顺序。数值越小，排列越靠前，默认为0。
`flex-grow`	定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大
`flex-shrink`	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
`flex-basis`	定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
`flex`	用于设置或检索弹性盒模型对象的子元素如何分配空间
`align-self`	定义flex子项单独在侧轴（纵轴）方向上的对齐方式