CSS弹性布局

1. 容器和项目

        使用flex布局的元素(父元素)称为容器

        他的所有子元素自动成为容器的成员，称为项目

         他们各自有控制布局的属性，必须是容器包裹着的项目

2.将容器指定为flex布局

display: flex;

3.指定轴排序方向

默认是row代表,默认情况下，不管子元素写了多少，都会挤在父元素指定宽度和高度内

指定容器是否让项目换行

flex-wrap: wrap;//换行

flex-wrap: no-wrap //不换行

flex-wrap: wrap-reverse; 第一行在最下方

从左为起点flex-direction: row

从右为起点flex-direction: row-reverse

从顶端为起点flex-direction: column

从底端为起点flex-direction: column-reverse

项目在主轴上的对齐方式

justify-content: flex-start;

justify-content: flex-end;

/* 居中对齐 */

justify-content: center;

/* 两端对齐 */

justify-content: space-between;

/* 两端的距离是两元素中间距离的一半 */

justify-content: space-around;

交叉轴对齐方式

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;//等于父元素的宽度

多轴线的对齐方式

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

4.项目属性

        (1)项目排列书次序order

 (2)项目的放大比例flex-grow:1

(3)项目的缩小尺寸 

(4)项目的自动尺寸 

 flex简写