CSS 居中小结

行内元素居中：

     常用的行内元素比如文本、图片、按钮等，可以通过给父元素添加一个：text-align:center;

块元素居中：

     给块元素添加一个固定的宽度，然后把块元素的左右外边距都设置成auot：margin-left:auto;margin-right:auto;（常用）

使用flex：

    特点：

            1.块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。

            2.flex布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）

            3.flex适用于简单的线性布局，更复杂的布局要交给grid布局（还没发布）

    Flex-container的属性（父元素）

            1.flex-direction方向  （控制容器里面的的元素方向，是水平(row)还是垂直(column)）

            2.flex-wrap换行 (默认是：flex-wrap:nowrap;如果父元素中子元素的宽度超过了容器，默认子元素不换行；flex-wrap:wrap;如果子元素的宽度超过了父元素容器，子元素会换行显示；)

            3.flex-flow上面两个的简写

            4.justify-content主轴方向对齐方式 （父元素设置成：justify-content:center;里面的子元素会居中显示；）

            5.align-items侧轴对齐方式

            6.align-content多行/列内容对齐方式（用的较少）

    Flex item的属性（子元素）

           1.flex-grow增长比例（空间过多时）

           2.flex-shrink收缩比例（空间不够时）

           3.flex-basis默认大小（一般不用）

           4.flex上面三个的缩写

           5.order顺序（代替双飞翼）

          6.align-self自身的对齐方式（用的较少）