5.29

Flex

弹性容器

1.默认宽度救赎父元素宽度，高度由内容所撑开

弹性盒子

1.默认宽度由内容撑开，默认高度和父元素一样高

2.弹性盒子没有块级元素，行内块元素，行内元素之分

3.弹性盒子默认不会换行，会沿着主轴方向一行显示

4.注意弹性盒子的概念

主轴对齐方式 justify-contene

justify-contene:flex-star；(默认)

justify-contene:flex-end；

终点开始一次排列

justify-contene:center；

沿主轴居中排列

justify-contene:space-around;

弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

justify-contene:sapce-between;

弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间

两侧盒子与容器两侧间隙为0

justify-contene:space-evenly;

弹性盒子沿主轴均匀排列，弹性盒子与容器之前间距相等

所有间隙平均分

侧洲对齐方式 align-items

align-items:flex-start;(默认值)

起点开始依次排列

align-items:flex-end;

终点开始依次排列

align-items:center;

沿侧轴居中排列

align-items:stretch;

默认值（没有设置高度的话）弹性盒子沿着主轴线呗拉伸至铺满容器