直接看代码&注释.box{display:flex;/*还可以设置行内元素的inline-flex*/flex-direction:row;/*主轴水平！：row：列（左至右）；row-reverse：列（右至左）主轴竖直！cloumn：行（上至下）；column-reverse：行（下至上）*/flex-wrap:nowrap;/*一行放不下的时候：nowrap不换行，wrap换行，wrap-reverse换行第一行在下方*//*flex-flow:rownowrap;是上面两者的简写形式*/justify-content:flex-start;/*定义项目在主轴上的对齐方式flex-start左侧，flex-end右侧，center居中，space-between两端对齐项目间隔相等，space-around项目左右两侧间距相同*/align-items:flex-start;/*定义项目在纵轴上的对齐方式flex-start上，flex-end下，center居中，baseline项目中第一行文字对齐，stretch默认值高度未设置时候将撑满容器高度*/}.item{order:0;/*定义项目的排列顺序，数值越小越靠前，默认0*/flex-grow:0;/*定义剩于空间的放大比例，默认0不放大，如果多个item均为1，则将等分剩于的空间，不同值按照比例分配剩于空间*/flex-shrink:1;/*定义项目缩小比例，默认为1，空间不足，均等比例缩小，为0则不缩小*/flex-basis:auto;/*定义项目在分配剩于主轴空间之前的主轴占据的长度，浏览器会根据这个属性去计算是否有剩于的空间*//*flex:auto;是flex-grow、flex-shrink和flex-basis的简写默认值：01auto*/align-self:flex-start;/*设置单个项目与其他项目不一样的对齐方式，可覆盖父容器设置的align-items，默认auto继承父元素的align-items值auto|flex-start|flex-end|center|baseline|stretch*/}
笔记