Flex布局

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

容器的属性:

1.flex-direction  决定项目的排列方向

值: row  水平方向,起点在左

     row-reverse  水平方向,起点在右 

     column  垂直方向,起点在上

     column-reverse  垂直方向,起点在下

2.flex-wrap 决定如果一条轴线排不下，如何换行 

值: nowrap  不换行

     wrap  换行,第一行在上方

     wrap-reverse 换行,第一行在下

3.flex-flow 是flex-direction和flex-wrap的简写,默认值为row nowrap

4.justify-content 决定了项目在主轴上的对齐方式

值: flex-start   左对齐

     flex-end  右对齐

     center  居中对齐

     space-between  两端对齐

     space-around   每个项目两侧的间隔相等

5.align-items 决定了项目在交叉轴上的对齐方式

值: flex-start  交叉轴的起点对齐

     flex-end  交叉轴的终点对齐

     center 交叉轴的中点对齐

     baseline   项目的第一行文字的基线对齐

     stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content 决定了多根轴线的对齐方式,如果项目只有一根轴线，该属性不起作用

值: flex-start    交叉轴起点对齐

     flex-end    交叉轴终点对齐

     center   交叉轴中点对齐

     space-between 交叉轴两端对齐

     space-around 每根轴线两侧的间隔都相等

  stretch（默认值）：轴线占满整个交叉轴。

 

项目的属性:

1.order  定义项目的排列顺序。数值越小，排列越靠前，默认为0

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

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

4.flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5.flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6.align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

auto | flex-start | flex-end | center | baseline | stretch;

 

项目中遇到的问题:

1. flex布局,item的图片可能会变形,可以给ing设置flex-shrink:0; 参考flex布局下img图片变形的解决方法
2. 元素宽度已知,即知道每行最多几个,且所有元素在一个容器内的布局方式

   <div class='container'>
     <div class='item'>宽度已知，最多放三个</div>
     <div class='item'>宽度已知，最多放三个</div>
     <div class='item'>宽度已知，最多放三个</div>
     ...
   </div>
   
   <style>
   /* scss code */
   .container {
     .item {
       margin-right: 30px;
       margin-bottom: 20px;
   
       &:nth-child(3n) { margin-right: 0; }
       &:nth-last-child(-n+3) { margin-bottom: 0; }
     }
   }
   </style>

   更多列表项布局方式