伸缩布局（Flex布局）

Flex布局：

常用的属性:  

 1：flex-direction: 控制主轴方向;  取值有：row（默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴）,row-reverse（与row相反）,column（表示垂直方向从上到下排列，此时垂直方向轴线为主轴）,column-reverse（与column相反）。

2：justify-content:主轴子项的对齐方式； 取值有： flex-start（起始对齐）, flex-end（结束对齐）, center（居中对齐）, space-between（两端对齐）, space-around（距离相等）。

 

3：align-items:侧轴上子项对齐方式； 取值有： stretch（默认值，当flex子项未设置高度或者高度为auto时，stretch起作用）,

flex-start（表示云侧轴开始位置对齐）, flex-end（与侧轴结束位置对齐）,center（与侧轴中间对齐）,baseline（表示基线对齐）

4：flex-warp（指定主轴子项是否换行）； 取值有：nowarp（默认值，表不换行，flex子项可能会溢出）,warp（表示换行，溢出子项会到下一行）,warp-reverse（表示反方向换行）

5：align-slef：单独指定某子项的对齐方式（一般指侧轴）； 取值有：auto（默认值）,flex-start .flex-end 。

 

6：align-content：只作用于多行情况下，用于多行的对齐方式； 取值有：stretch（默认值）, flex-start,  flex-end,  center,  space-between,  space-around  。

主要是说明flex布局的常用属性，效果图太多，未上传，

                                                                                                    77-81课