flex布局总结

参考链接: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

当给一个元素(容器)设置了display: flex的时候，那么就可以对这个元素里面的子元素进行flex布局。

/** 块级元素的flex布局 */
.box{
    display: flex;
}
/** 行内元素的flex布局 */
.box{
  display: inline-flex;
}

.box{
  display: -webkit-flex; /* Webkit 内核的浏览器，必须加上-webkit前缀 Safari */
  display: flex;
}

 容器的六大属性:

.box{
    display: flex;
    /**flex-direction 决定子元素的排列方向 row(水平起点左端)、row-reverse(水平起点右端)、column(垂直起点上端)、column-reverse(垂直起点下端)*/
    flex-direction: row; /**默认*/
    /** flex-wrap 容器内的子元素是否换行 nowrap(不换行)、wrap(换行第一行在上方)、 wrap-reverse(换行第一行在下方)*/
    flex-wrap: nowrap; /**默认*/
    /** flex-flow: flex-direction 规定了容器内子元素的排序方式row、nowrap(倒序)*/
    flex-flow: flex-direction row;/**默认*/
    /** justify-content 定义容器内子元素的对齐方式子元素间存在间隔 flex-start(左对齐) | flex-end(右对齐) | center(居中) | space-between(两端对齐) | space-around(两端对齐每个子元素的两端存在间隙)*/
    justify-content: flex-start;/**默认*/
    /** align-items容器高度的对齐方式(可能不太准确) flex-start(高度起点对齐) | flex-end(高度终点对齐) | center(高度的中点对齐) | baseline(第一行文字的基线对齐) | stretch(子元素的高度占满整个容器);*/
    align-items: stretch;/**默认*/
    /** align-content 子元素多行容器高度的对齐方式(可能不太准确) flex-start(高度起点对齐) | flex-end(高度终点对齐) | center(高度中点对齐) | space-between(高度两端对齐) | space-around() | stretch(默认值)*/
    align-content: stretch;/**默认*/
}

子元素的六个属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）

• order(属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。)

• .item {
    order: 0;
  }

   

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

• .item {
    flex-grow: 0; /* default 0 */
  }

   

• flex-shrink(属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。)

• .item {
    flex-shrink: 1; /* default 1 */
  }

• flex-basis（项目占据主轴空间的大小）

• .item {
    flex-basis: 200px; /* default auto */
  }

• flex(属性取值 不太理解)

• /* flex属性默认是0 1 auto
  flex-grow为0，则存在剩余空间也不放大
  flex-shrink为1，则空间不足该项目缩小
  flex-basis为auto，则该项目本来的大小 */
  .item {
    flex: 0 0 auto; /**默认值为0 1 auto*/
    /** flex:1; 表示剩余空间全部分给该元素*/
  }

• align-self()