Flux讲解

flux概念

<div class="container">
  <div class="t1">弹性容器1</div>
  <div class="t2">弹性容器2</div>
</div>

//.container
display flex    //flex布局
    //flex-direction column //修改主轴的方向
    /*flex-flow column wrap-reverse*/
    /*width 100px*/
    /*border 2px solid aqua*/
    /*flex-wrap nowrap*/
    /*background antiquewhite*/
    /*.t1*/
      /*width 50px*/
      /*background red*/
    /*.t2*/
      /*width 100px*/
      /*background green*/
      /*flex-shrink 6*/

id为container的display为flex会成为flux容器，而t1,t2是flux元素，container会生成两个主轴，x,y，x轴为主轴，

也可以通过flex-direction column旋转。

假设 contain 只有100px, t1 50px ,t2，100px.那么， flux有一个默认属性 

flex-wrap 有三种值。 nowrap 不换行， wrap换行，

nowap不换行时，flux元素有两种属性。

flex-shrink 在容器不够的情况下，该元素等比缩小。

如果contain过大时，flex-grow 元素 属性 等比放大