个人博客: 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);
// }
// }