1：多列交叉轴的布局：
items保证所有成员在一列的情况下控制交叉轴的方向，item单个的意思 self单个item控制他在交叉轴上的方向 align-content内容，控制整体布局（item子元素，控制一个个元素的布局） 把多列的item在整体的垂直方向上设置位置使用align-content 如果是单个item控制他的垂直方向使用align-item
align-content：flex -start flex -end space-between space-around streteh
2： order：定义项目的排列顺序，数值越小，排序靠前，默认0.值大，越靠后
如果让一个当个的item 调到顺序以及让其在顶点对齐 在父级让items居中。 在子级的某个item进行设置其顺序使用order 然后再单个item的对齐方式，使用align-self： 比如：.box { align-items: center;}
.box .item:nth-child(2) { order: -1;
align-self: flex-start;
}
3：flex复合属性：
设置 用户代码片段，就是写一个新的html页面
ctrl+？去除/标签，然后将里面的prefx：后面的换一个名字 下面body之前的模板删除，只保留[]，然后写入你需要的内容 写好之后在你的本身页面里面写入： 里面输入你之前起的名字 自动会显示你之前在body里面写入的内容
"Print to console": {
"scope": "javascript,typescript",
"prefix": "div01",
"body": [
"<div class='box'><div class='item'><h1>1</h1></div><div class='item'><h1>2</h1></div><div class='item'><h1>3</h1></div></div>"
],
"description": "Log output to console"
}
4：flex-grow 放大比例，默认值为0.，如果有剩余空间，也不放大。主要作业
为了分配剩余空间的
每个item不设宽度的话，直接在父级加入flex-grow：1，代表每个盒子都放大item，均匀的沾满父元素
如果设置宽度，就在最后一个item使用flex-grow：1 就最后一个盒子放大
flex布局item的基本宽度
5： flex-basis不设置的话，默认是auto
flex布局时设置了flex-basis，width就不管用了，同时存在的时候，优先使用flex-basis box的宽度是500，里面的每个item是150，在子级设置flex-basis200px 如果父元素宽度太小了，item排列不下，在子级设置了flex-basis宽度会自动缩小 直到沾满父元素
flex-shrink 默认值为1，如果值越大，按比例就自动缩的越小
复合语法：flex：flex-grow flex-basis flex-shrink
使用flex布局，会影响继承父元素宽度的情况，所以需要设置100% 让其重新撑满屏幕的宽度
