Flex布局

直接看代码&注释

.box {
    display: flex;  /* 还可以设置行内元素的 inline-flex */
    flex-direction: row; /* 主轴水平！：row：列（左至右）；row-reverse：列（右至左）   主轴竖直！cloumn：行（上至下）；column-reverse：行（下至上） */
    flex-wrap: nowrap; /* 一行放不下的时候：nowrap不换行，wrap换行，wrap-reverse换行第一行在下方  */
    /* flex-flow: row nowrap;  是上面两者的简写形式 */
    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的简写默认值：0 1 auto */
    align-self: flex-start; /* 设置单个项目与其他项目不一样的对齐方式，可覆盖父容器设置的align-items，默认auto继承父元素的align-items值  auto | flex-start | flex-end | center | baseline | stretch */
}