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 */
}
发表评论 / Comment

用心评论~

金玉良言 / Appraise
幻想家LV 2
2020-09-16 16:43
大佬更新了~
头像
DYBOY站长已认证
2020-09-19 15:53
@幻想家:感谢关注