html常用页面布局弹性布局display：flex,以及常用属性

个人理解

display：flex开启弹性布局，这个属性对需要开启弹性布局的父元素设置，设置之后父元素中的子元素浮动会被取消。

开启弹性布局后父元素被称作容器，子元素被称作项目。

设置弹性布局之后，默认主轴为x轴，交叉轴为y轴，可以通过 flex-direction属性进行修改主轴方向，交叉轴也会随之变换

属性1： justify-content设置在主轴的对齐方向，对容器使用，值有

flex-start（默认值从容器里面左往右排列，项目顺序不变） / 

flex-end （从容器里面右往左排列，项目顺序不变）/

 space-around （项目于项目之间产生相同间隙，项目与容器之间产生间隙，前者的大小是后者的两倍）/ 

space-evenly（项目于项目之间产生相同间隙，项目与容器之间产生间隙，前者的大小和后者一样） /

 space-between（项目于项目之间产生相同间隙，项目与容器之间不产生间隙）

等其它不常用值

属性2：align-items设置在交叉轴的对齐方向，对容器使用，值有

 align-items属性值和justify-content基本一致，建议自己探索

属性3：flex-shrink，对项目使用，设置项目是否缩放 ，默认情况下当项目的宽或高相加超越容器的宽高后，项目的大小会进行缩小（直至与项目的内容大小一致）

属性4：flex-wrap，对容器使用，设置容器里面是否会自动换行（warp)，默认情况不会(nowarp),

设置warp后，项目的宽或高相加超越容器的宽高，项目不会缩小，只会进行换行