css - flex 布局 （生成前缀）

个人博客： http://leijin0416.coding.me/

学习文献
张鑫旭- flex 教程	小程序-WEUI组件（布局可以细看，不使用绝对定位）
颜海镜— 移动端flex布局实战
————
flexbox - less生成前缀比较适合vue

flex 下使用绝对定位是无效的；

12.18/左右两栏水平垂直居中：图片跟文字还是需要vertical-align的支持：

—— flex: 1;实现子元素的宽度在父元素的宽度上实现等比均分，如果不带这个属性，子元素的宽度等于其本身宽度；

---

1、 flex-flow: row wrap; - 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右，写在父元素上

column - 显示为列;

2、 flex: 0 1 33.333%; - 默认值为0 1 auto;写在子元素上

flex 默认值等同于 flex:0 1 auto；
flex:none 等同于 flex:0 0 auto；
flex:auto 等同于 flex:1 1 auto；

flex-grow属性默认等于0，即使用本来的宽度，不拉伸。等于1时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。

3、在Flex布局中，flex子元素设置float，clear以及vertical-align属性都是没有用的(有待考证)。私有前缀可以不用再加（注：老型机还是会有兼容的问题）；

4、align-self 设置在子元素上的对齐方式，align-items 在父元素中设置其所有子元素的对齐方式；

（ 需要注意的是被绝对定位与固定定位的盒子不参与flex布局，但不包括相对定位；）

<div class="weui-centent">
	<div class="item">
		<p>商铺</p>
	</div>
	<div class="item">
		<p>商铺</p>
	</div>
	<div class="item">
		<p>商铺</p>
	</div>
	<div class="item">
		<p>商铺</p>
	</div>
	<div class="item">
		<p>商铺</p>
	</div>
	<div class="item">
		<p>商铺</p>
	</div>
</div>

.weui-centent{
	display: flex;
	flex-flow: row wrap;   /* 换行 */
	// 下面这两个属性会 水平垂直居中
	justify-content: center;   ------------------//主轴方向居中
	align-items: center;       ------------------//侧轴方向居中
}
.item {
	flex: 0 1 33.333%;   /* 宽度 */
	padding: 15px 0;
	text-align: center;  /*  或者 display: flex; */
	border-bottom: 1px solid #efefef;
	border-right: 1px solid #efefef;
	box-sizing: border-box;
}
.item:nth-of-type(3n+3) {
	border-right: none;
}

效果图

---

2018/11.17；

在移动端小程序项目开发中flex布局的兼容性也是一个比较棘手的事情，在最近的一次开发中，flex: 0 1 33.333%;属性在ios9的系统中会存在一些问题，其宽度会失效，后来改为inline-block行内元素实现效果；

在ios开发中还是最好带上-webkit-前缀：

兼容性可写：
flex: num;
-webkit-flex: num;
具体可参考：弹性布局的兼容处理 和 弹性盒子与绝对定位的问题

在最近的一次项目开发中用到flex实现实现左右固定宽度，中间自适应的布局的一个效果，在没有写前缀的情况下手机的适配上得到好的一个效果，但在ios9以下的系统中的表现就不得而知了，容易出现上面的情况，后面经理为保守起见后面改用绝对布局实现，苦逼脸哈哈哈哈。。。

推荐在手机端左右布局上可以用flex布局实现，网页端要求在ie10+；

贴一下我的代码：

<view class="weui-cell">
  //左侧
  <view class="weui-cell-hd">
  	<view class="m-img">
  		<image mode="widthFix" src="" class="imgs"><image>
  	<view>
  </view>
  // 设置flex: 1;
  <view class="weui-cell-bd">
    <text><text>
  </view>
  //右侧
  <view class="weui-cell-hd">
  	<view class="m-img">
  	   <image mode="widthFix" src="" class="imgs"><image>
  	<view>
  </view>
<view>

效果图：

---

flexbox - less生成前缀比较适合vue：

@charset "UTF-8";

//flex前缀  ---------   预处理器mixin,类似less,兼容手机端和pc端
.display-flex(@display: flex) {
    & when (@display=flex) {
        display: -webkit-box;
    }
    & when (@display=inline-flex) {
        display: -webkit-inline-box;
    }
    display: @display;
    display: e("-webkit-@{display}");
}

.flex-direction(@direction) {
    & when (@direction=row) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    }
    & when (@direction=row-reverse) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
    }
    & when (@direction=column) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
    }
    & when (@direction=column-reverse) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
    }
    -webkit-flex-direction: @direction;
    flex-direction: @direction;
}

.flex-wrap(@wrap) {
    & when (@wrap=nowrap) {
        -webkit-box-lines: single;
    }
    & when (@wrap=wrap) {
        -webkit-box-lines: multiple;
    }
    flex-wrap: @wrap;
    -webkit-flex-wrap: @wrap;
}

.justify-content(@justify-content) {
    justify-content: @justify-content;
    & when (@justify-content=flex-start) {
        -webkit-box-pack: start;
    }
    & when (@justify-content=flex-end) {
        -webkit-box-pack: end;
    }
    & when (@justify-content=center) {
        -webkit-box-pack: center;
    }
    & when (@justify-content=space-between) {
        -webkit-box-pack: justify;
    }
    -ms-flex-pack: @justify-content;
    -webkit-justify-content: @justify-content;
}

.align-items(@align-items) {
    align-items: @align-items;
    & when (@align-items=flex-start) {
        -webkit-box-align: start;
    }
    & when (@align-items=flex-end) {
        -webkit-box-align: end;
    }
    & when (@align-items=center) {
        -webkit-box-align: center;
    }
    & when (@align-items=baseline) {
        -webkit-box-align: baseline;
    }
    & when (@align-items=stretch) {
        -webkit-box-align: stretch;
    }
    -ms-flex-align: @align-items;
    -webkit-align-items: @align-items;
}

.order(@order) {
    -webkit-box-ordinal-group: @order;
    -webkit-order: @order;
    order: @order;
}

.flex(@flex) {
    -webkit-box-flex: @flex;
    -webkit-flex: @flex;
    flex: @flex;
}

//调用
// .container-box {
//     .display-flex;
//     .flex-wrap(row);
//     .justify-content(center);
//     .align-items(center);
//     .row {
//         .flex(0 0 1);
//     }
// }