锐客网

  1. 首页 > it技术 > >

自定义简易常用Flex布局兼容写法样式类

  • 父级设置flex
    .flex{ display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex }

  • 主轴排列方向，X轴和Y轴
    .flex-x{ -webkit-box-direction: normal; -webkit-box-orient:horizontal; -moz-flex-direction:row; -webkit-flex-direction:row; flex-direction:row } .flex-y{ -webkit-box-direction:normal; -webkit-box-orient:vertical; -moz-flex-direction:column; -webkit-flex-direction:column; flex-direction:column }

  • 确认主轴情况下的对齐方式
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等
    space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
    .flex-x-start{ -webkit-box-pack:start; -moz-justify-content:flex-start; -webkit-justify-content:flex-start; justify-content:flex-start } .flex-x-center{ -webkit-box-pack:center; -moz-justify-content:center; -webkit-justify-content:center; justify-content:center } .flex-x-end{ -webkit-box-pack:end; -moz-justify-content:flex-end; -webkit-justify-content:flex-end; justify-content:flex-end } .flex-x-between{ -webkit-box-pack:justify; -moz-justify-content:space-between; -webkit-justify-content:space-between; justify-content:space-between } .flex-x-around{ -webkit-box-pack:around; -moz-justify-content:space-around; -webkit-justify-content:space-around; justify-content:space-around }

  • 设置交叉轴上对齐方式，且在只有一根轴线情况下，即不设置换行
    flex-start：交叉轴的起点对齐
    flex-end：交叉轴的终点对齐
    center：交叉轴的中点对齐
    .flex-y-start{ -webkit-box-align:start; -moz-align-items:flex-start; -webkit-align-items:flex-start; align-items:flex-start } .flex-y-center{ -webkit-box-align:center; -moz-align-items:center; -webkit-align-items:center; align-items:center } .flex-y-end{ -webkit-box-align:end; -moz-align-items:flex-end; -webkit-align-items:flex-end; align-items:flex-end }

  • 换行
    flex-wrap: nowrap | wrap | wrap-reverse第一行在下方; //兼容写法 -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap:wrap;

  • 多轴情况下的排列方式，即设置换行
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; //兼容写法 -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content:flex-start;

  • 【自定义简易常用Flex布局兼容写法样式类】所有代码，复制即可，未包含多轴情况
    .flex{display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex} .flex-x{-webkit-box-direction:normal; -webkit-box-orient:horizontal; -moz-flex-direction:row; -webkit-flex-direction:row; flex-direction:row} .flex-y{-webkit-box-direction:normal; -webkit-box-orient:vertical; -moz-flex-direction:column; -webkit-flex-direction:column; flex-direction:column} .flex-x-start{-webkit-box-pack:start; -moz-justify-content:flex-start; -webkit-justify-content:flex-start; justify-content:flex-start} .flex-x-center{-webkit-box-pack:center; -moz-justify-content:center; -webkit-justify-content:center; justify-content:center} .flex-x-end{-webkit-box-pack:end; -moz-justify-content:flex-end; -webkit-justify-content:flex-end; justify-content:flex-end} .flex-x-between{-webkit-box-pack:justify; -moz-justify-content:space-between; -webkit-justify-content:space-between; justify-content:space-between} .flex-x-around{-webkit-box-pack:around; -moz-justify-content:space-around; -webkit-justify-content:space-around; justify-content:space-around} .flex-y-start{-webkit-box-align:start; -moz-align-items:flex-start; -webkit-align-items:flex-start; align-items:flex-start} .flex-y-center{-webkit-box-align:center; -moz-align-items:center; -webkit-align-items:center; align-items:center} .flex-y-end{-webkit-box-align:end; -moz-align-items:flex-end; -webkit-align-items:flex-end; align-items:flex-end}

    推荐阅读


    上一篇：JS原型和原型链

    下一篇：HyperX阿洛伊起源RGB水轴机械键盘