flex布局

概念

常见的布局方案有三种：文档流、position属性、float属性。该方法有其弊端，无法实现元素的垂直居中。所以flex布局的出现很好的解决这些问题，它可以简便、完整、响应式实现各种页面布局。兼容性强。
采用flex（flexible box）布局元素称为flex容器，所有子元素自动成为容器成员，称为flex项目。

上图所示，容器存在俩根轴：水平轴和垂直轴。
内部子元素默认沿主轴排列。单个子元素占据的主轴空间叫做mian size，交叉轴的空间叫做cross sieze。
任何容器都可以指定为flex布局，这也包括行内元素。webkit内核浏览器，须加上-webkit前缀。

.box{
  display: flex;
}
.box2{
  display: inline-flex;
}
.box3{
    display:-webkit-flex;/*safari*/
    display:flex;
}

父容器设置flex属性后，内部子元素的float、clear和vertical-align属性会失效。

容器属性

一共六个

• flex-direction
  决定主轴方向，即子元素排列方向。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

看下图可以知其具体用法

如图分别为column-reverse、column、row、row-reverse。

• flex-wrap
  默认情况下，子元素在一条线上。flex-wrap定义一条轴线无法排列时，怎么换行。

  
  

.box{
    flex-wrap:nowrap|wrap|wrap-reverse;
}

nowrap(default):不换行

wrap:换行，第一行在上方

wrap-reverse:换行第一行在下方

• flex-flow:flex-direction和flex-wrap属性简写形式，默认值为row nowrap

.box{
    flex-flow:<flex-direction>||<flex-wrap>
}

• justify-content:项目在主轴上的定义方式。

.box{
    justify-content:flex-start|flex-end|center|space-betwwen|space-around
}

默认值是flex-start：左对齐
space-around：每个项目俩侧间隔，项目之间间隔为项目于边框之间间隔俩倍

• align-items：交叉轴对齐方式

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

具体对齐方式与交叉轴方向有关
1.flex-start：交叉轴起点对齐。
2.flex-end：交叉轴终点对齐。
3.center：交叉轴中点对齐。
4.baseline：项目第一行文字基线对齐
5.stretch: 如果项目有未设置高度或身为auto，将占满整个容器高度。

• align-content：多根轴线的对齐方式。如果项目只有一根轴线，那么该属性不起作用

  
  

子元素属性

• order: 属性定义子元素的排列顺序。数值越小，排列越靠前，默认为0.

.item{
    order:<integer>
}

• flex-grow:定义项目放大比例，默认为0，即如果存在剩余空间，也不放大。

.item{
    flex-grow:<number>;/*default 0*/
}

属性值为1，等分剩余空间。

• flex-shrink定义缩小空间，如果空间不足，子元素缩小

.item{
    flex-shrink:<number>;/*default 1*/
}

• flex-basis:定义分配多余空间之前，子元素占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目本来大小。可以设为width和height属性一样的值，则项目占据固定空间。参考链接
• flex:flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。auto(1 1 auto)和none（0 0 auto）。
• algin-self:允许单个项目和其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

参考链接(原创性几乎为0，只是为了消化吸收)

flex布局教程：语法篇
flex速查表