关于flex布局

移动端布局的时候关于上下左右居中最好抛弃使用line-height、text-align、padding、margin等调节

使用flex布局简单不易错，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

可以在总样式自定义一个flex，如下

.x-flex-container {
　display: flex;
　align-items: center;                                                           //上下居中
　justify-content: center;                                                      //左右居中
　box-sizing: border-box;                                                     //盒子模型
　width: 100%;
　　&.r-reverse {
　　　flex-direction: row-reverse;       //flex-direction属性决定主轴的方向（即项目的排列方向）四个属性row、row-reverse、column、column-reverse　　

　　}                                                                                     //row：（默认值）主轴为水平方向，起点在左端。

　　&.c-reverse {　　　　　　　　　　　　　　　　　　 //row-reverse：主轴为水平方向，起点在右端。
　　　flex-direction: column-reverse;　　　　　　　　　  //column-reverse：主轴为垂直方向，起点在下沿。
　　}
　　&.column {
　　　flex-direction: column;　　　　　　　　　　　　　 //column：主轴为垂直方向，起点在上沿。
　　}
　　&.start {
　　　justify-content: flex-start;　　　　　　　　　　　　 //左对齐（默认值）
　　}
　　&.end {
　　　justify-content: flex-end;　　　　　　　　　　　　  //右对齐
　　}
　　&.avg {
　　　justify-content: space-around;　　　　　　　　　　//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
　　}
　　&.between {
　　　justify-content: space-between;     　　　　　　　　//两端对齐，项目之间的间隔都相等。
　　}
　　&.evenly {
　　　justify-content: space-evenly;
　　}
　　&.wrap {
　　　flex-wrap: wrap;　　 //默认情况下，项目都排在一条线上。flex-wrap定义，如果一条轴线排不下如何换行。wrap：换行，第一行在上方。
　　}
　　> .x-flex-a {
　　　flex: auto;
　　　width: 10px;
　　}
}

如此一来就可以在需要的地方加上自定义的class便实现了大部分的上下左右居中和对齐

 

（另外，续昨天的引iconfont随笔加一些内容

• 小程序中图标最好不要用 icon 标签，用 text 标签，因为 icon 有默认高度，有时候在其他类型手机屏幕会有位置偏移的现象，用 text 标签只需要设置图标的 font-size 就可以啦，亲测使用 icon 标签的时候在ip5下位置发生偏移了

）

转载于:https://www.cnblogs.com/minimo/p/8805455.html