flex 弹性布局

案例基础布局

html

<ul class="box">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>

css

.box{
            display: -webkit-flex;
            display: flex;
        }
        .item{
            width: 200px;
            height: 300px;
            background: red;
            border: 1px solid #ccc;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            color:#fff;
        }

由于flex主要方便与移动端布局，因此测试以谷歌模拟移动端看效果：

由于使用 flex 布局，子元素默认是横向排列，因此不须要float，也不起做用；

父盒子属性探究

flex-direction

flex-direction 表示子元素的排列方向和顺序；默认 row （横排，左到右）； row-reverse 表示 横排右到左

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction:row-reverse;    
        }

若是每一个把每一个 li 设置为 width：3000px;(当前屏幕宽度980px),效果：

子元素宽度超出，不但没有换行，会自动适应大小，平分为 25%；

上面的平分 只是在 row 的时候 会平分，若是是换成竖向排列：

flex-direction: column;

元素不会被挤压了，拥有3000px宽；可是要注意，它不是由于不够空间而换行了，只是column 值规定了它 竖向排列
下面的值能够调整为 倒序竖向排列

flex-direction: column-reverse;  //表示元素竖直 反向排

flex-wrap

flex-wrap 默认 nowrap：不换行。上面的3000px 子元素正是由于 这个竖向默认是不会换行的，因此 上面设置3000px宽，不会换行；

一样的代码，若是加多一句

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;    //换行，第一行在上方。
        }

能够发现，设置为能够换行之后，子元素宽度变为100%屏幕宽了；这就像一个弹性盒子塞到了比本身小的盒子中，弹性盒子自动收缩了本身的宽度。

若是这样写：

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;    //换行，第一行在下方。
        }

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow：row wrap  ===  flex-direction:row; flex-wrap: wrap

代码又改一下：

.box{
      display: -webkit-flex;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
    }
    
  能够写成

.box{
      display: -webkit-flex;
      display: flex;
      flex-flow:row-veverse wrap-reverse
    }

justify-content

它有五个值，其中若是把 item 比作word文档的文字的话, flex-star 能够看作是左对齐， flex-end： 右对齐； flex-center： 居中；

重点介绍值 space-around:平份内容空余空间，每一个项目两侧的间隔相等;
设空余空间为 area，有子元素 k个，每一个子元素等于增长了多少margin？==> area/2k

本例子：

.item{
    width:200px;
}
.box{
       display: -webkit-flex;
       display: flex;
       justify-content: space-around;
}

值得注意的是，项目之间的间隔比项目与边框的间隔大一倍。

space-between：两端对齐，项目之间的间隔都相等。不给

align-items

align 字样基本就知道它是针对 垂直方向的了；

.box{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            height: 1760px;
            align-items: center;

        }

记得给父加一个高度；这样子能够看出元素垂直居中了

其余的类似的属性就再也不一一写了

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
stretch（默认值）：若是项目未设置高度或设为auto，将占满整个容器的高度。

看 baseline属性: 项目的第一行文字的基线对齐。

这个属性 比较新颖，能够试试：

.box{
     align-items: baseline;
     }
     
    <ul class="box">
        <li class="item" style="height: 150px;line-height: 150px">1</li>
        <li class="item" style="height: 500px;line-height: 500px">2</li>
        <li class="item" style="height: 250px;line-height: 250px">3</li>
        <li class="item" style="height: 170px;line-height: 170px">4</li>
    </ul>

上面我给每一个item 都设置了 不一样的高度 和 line-height;

能够看到 容器为了让文字对齐 而调整本身的位置；

align-content

定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。

.box{
            height: 1760px;   //高度要撑开
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap; //横排 换行；产生多轴

        }
        
        
<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

尝试添加 代码

align-content: flex-end;

align-content:space-around;

align-content:space-between;

align-content : center;

能够说，flex布局在父元素上对子元素垂直方向的控制仍是很是到位和明确的；

子元素属性探究

order

大概能够理解为子元素的排队号码，默认都是0，越大排队越后；

<ul class="box">
        <li class="item" style="order:10">1</li>
        <li class="item" style="order:11">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

能够看到，1 号由于 order 设置为10排到了后面； 而2号由于更加大的order 而排到最后。

flex-grow 多余空间分配比例

它的值是一个number，默认为0；只要有一个同轴元素被设定了flex-grow ，全部多余空间都会按照这个比例分配，并让元素占满整行。这个被分配的空间，是算在自身里面的；

<ul class="box">
        <li class="item" style="flex-grow:1;">1</li>
        <li class="item" style="flex-grow:2;">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

盒子宽度变大了，（就是grow啦）

若是子元素有margin，那么会先计算横排多少个，再决定 flex-grow 分配的空间是多少

例如以下代码，

//没有设定 flex-grow 时
 <li class="item" style="flex-grow:0;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:0;">2</li>

//设定了 flex-grow 时
 <li class="item" style="flex-grow:2;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:1;">2</li>

因此，margin 并不算 多余空间 ，不会被从新分配；

flex-shrink

此属性与 flex-grow 有点相反的意思，用于处理 不换行时，内容超出屏幕了，应该决定谁来缩小；
值越大 缩小比例越大；默认是 1

改一下代码；

.box{
    flex-flow:row nowrap;
}

<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

此时 父盒子规定不能换行；可是5个item 宽度已经超过屏幕宽了；此时你们是等比缩小

下面设置1号 flex-shrink：600

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

能够看到，尽管我把1号设置到缩放很是大了，可是实际宽度并无很小；说明浏览器会本身决定内容是否已经足够放下，够了就中止缩放；

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="flex-shrink:200;">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

当内容很是多时，1号就明显被缩放得很是厉害，同时我发现，4号尽管设置200，可是它的大小跟被设为600的 1号是同样的。

这是由于他们已经缩放到最后只能容纳文字的空间了；因此就不会再缩放下去；这跟文字占位一个道理

flex-basis

属性定义了在分配多余空间以前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。

简单来讲，就是这个值会影响浏览器计算的输入值，有四种状况

1，原本就会超出，而后你设定的值比原值低（原值200px每一个item），你的元素会被压缩。

<ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

1，原本就会超出，而后你设定的值比原值大，你的元素会被相对放大些。

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

3 原本不会超出，你设定的值比原来小，你仍是会小一点

<ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

4 原本不会超出，你设定的值比原来大，你就会更大

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

这个值你能够当作宽度来看，当设定为 跟原来同样的值得时候，基本没有变化

<ul class="box">
        <li class="item" style="flex-basis:200px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

align-self

此子元素单独设置垂直方向对齐方式；默认auto 表示父亲怎么定义就怎么来；其余值跟align-items是同样的

<ul class="box">
        <li class="item" style="align-self: center">1</li>
        <li class="item" style="align-self: flex-end">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item" style="align-self: center">5</li>
    </ul>

此属性主要是方便特殊定位 某个字元素

flex属性

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，由于浏览器会推算相关值。

实践技巧

情景一： 右边div 固定，左边自动分布空间；

上图，去结算 要固定宽度并靠右显示；左边两个 价格自由分配 剩余空间；

布局(本案例是小程序)

<view class='order-bottom'>
    <view class='bot-left'>
      <text class='dis'>已经优惠 ¥{{discounts}}</text>
      <view class='he'>
        合计<text> ¥{{account-discounts}}</text>
      </view>
    </view>
    <view class='to-pay'>
      去结算
    </view>
 </view>

css：

.order-bottom{
  display: flex;
  justify-content: space-between;
}
.bot-left{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}
.to-pay{
  width: 220rpx;
  height: 100%;
}

情景二：右边固定高度，左边文字垂直居中

布局

<view class='option-item'>
  <view class='opiton-title'>备注：</view>
  <view class='option-val'>
     <textarea/>
  </view>
</view>

css：

.option-item{
  display: flex;
  justify-content: space-between;
  align-content: center;
  font-size: 16px;
}

.opiton-title{
  align-items: center;
  display: flex;
}
.option-val textarea{
  width:400rpx;
  min-height: 50rpx;
}

是否能实现宽度满了之后自动换行，换行后的元素也自动分布？

要求一套代码实现如下效果

html 规定
<div>

<span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
    <span></span>
</div>

css

div{
            display: flex;
            width: 300px;
            height: 200px;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 10px;
        }
        span{
            /*这个min-width 规定了flex能压缩子元素的最小宽度，配合flex-wrap：warp 就达到自动换行的效果*/
            min-width: 25%;
            height: 50%;
            flex: 1;
            background: red;
            padding: 10px;
            /*背景被裁剪至内容区（content box）外沿。*/
            /*此句设置背景只在内容区域有效，很妙*/
            background-clip: content-box;
            box-sizing: border-box;
        }

最后

移动端使用flex 布局感受仍是很是给力的，而且一般知足各个屏幕自适应的要求；有机会仍是要多实践起来。