- 首页 > 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}
推荐阅读
