flex 布局 笔记

parent:

1. display: flex;
   display: -webtik-flex;

2. flex-direction: row|row-reverse|column|column-reverse;
   默认row

3. flex-warp: warp|nowarp|warp-reverse; 默认nowarp

4. flex-flow: <flex-direction> <felx-warp>; 默认[row nowarp]
   
   

5. justify-content: flex-start|center|felx-end|space-around|space-between|space-evenly;
   默认flex-start

6. align-items: flex-start|center|felx-end|baseline|stretch; 默认felx-start

7. align-content: flex-start|center|felx-end|space-around|space-between|space-evenly|stretch;
   当有多（flex-direction: row[行]|column[列]）时才有效，因为为只有一行的话不如直接用 align-items。

child:

1. oerder: <int>;
   默认0 越小顺序越靠前支持负数
2. flex-grow: <num>;
   默认0 可以为小数,如果存在剩余空间,则按比例放大,如果为1就填满。如果都是1就平分剩余空间;如果有一个为2就分得两份剩余空间。
3. flex-shrink: <num>;
   默认1 可以为小数,如果空间不足,则按比例缩小。如果其他为1,一个为0就把其他的挤小。
4. flex-basis: <lengh>;
   默认auto 在有剩余空间的时候,元素占用主轴的空间，用法和 width和height一样，可以是auto,单位可以是%,px,vw,vh,em等
5. flex: <flex-grow> <flex-shrink> <flex-basis>;
   默认0 1 auto
6. align-self: auto|flex-start|center|flex-end|stretch;
   默认auto,默认继承parent的align-items属性。如果想单独设置该元素，就可以设置这个属性。