html新布局display:flex的常用用法

写在容器（父元素）身上的属性

1、声明弹性盒子

display: flex;

display:inline-flex;

2、设置在主轴的排列方式 写在父元素

justify-content:flex-start; 左上角开始 默认值

justify-content:flex-end; 右上角开始

justify-content:center; 居中显示

justify-content:space-between; 两端对齐，中间自动分配

justify-content:space-around; 每个项目左右间隔一致

justify-content:space-evenly; 每个项目的间隔一样

3、设置主轴方向（主轴默认是横轴）写在父元素

flex-direction:row; 横轴（从前往后）

flex-direction:row-reverse; 横轴（从后往前）

flex-direction:column; 竖轴（从上到下）

flex-direction:column-reverse; 竖轴（从下到上）

4、交叉轴的排列方式(写在父元素上)

align-items:stretch; 默认值 高度铺满父元素

align-items：flex-start 最顶部

align-items：flex-end 最底部

align-items：center 垂直居中显示

align-items：baseline 基线对齐

5、多行排列方式(写在父元素上)

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-around;

align-content:space-between;

写在容器（父元素）身上的属性

1、声明弹性盒子

display: flex;

display:inline-flex;

2、设置在主轴的排列方式（写在父元素上）

justify-content:flex-start; 左上角开始 默认值

justify-content:flex-end; 右上角开始

justify-content:center; 居中显示

justify-content:space-between; 两端对齐，中间自动分配

justify-content:space-around; 每个项目左右间隔一致

justify-content:space-evenly; 每个项目的间隔一样

3、设置主轴方向（主轴默认是横轴）写在父元素

flex-direction:row; 横轴（从前往后）

flex-direction:row-reverse; 横轴（从后往前）

flex-direction:column; 竖轴（从上到下）

flex-direction:column-reverse; 竖轴（从下到上）

4、交叉轴的排列方式(写在父元素上)

align-items:stretch; 默认值 高度铺满父元素

align-items：flex-start 最顶部

align-items：flex-end 最底部

align-items：center 垂直居中显示

align-items：baseline 基线对齐

5、多行排列方式

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-around;

align-content:space-between;

6、一行排不下 是否换行（默认是收缩显示 不换行）

flex-wrap：nowrap（不换行 默认值）

flex-wrap：wrap 换行

写在项目身上（子元素）属性

1、定义项目的顺序

order： 2; 数字越大 就越靠后

2、设置单个项目在交叉轴的排列（和上面多行排列同理，就写进示例里了）

align-self:flex-start;

align-self:flex-end;

align-self:center;

3、项目放大 (子元素总宽小于父元素时放大)

flex-grow：1； 数字是份数 默认值0

4、项目的缩小（子元素总宽大于父元素时缩小）

flex-shrink：1； 默认值是1（收缩） 0 不收缩