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;

css - flex 布局 (生成前缀)_第1张图片

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;
}

效果图
css - flex 布局 (生成前缀)_第2张图片


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>

效果图:
css - flex 布局 (生成前缀)_第3张图片


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);
//     }
// }

你可能感兴趣的:(CSS)