1. VUE-flex布局；

—— 子级元素

  1. /* 
  2. flex-grow：排序;
  3. flex-grow：放大比例；
  4. flex-shrink：缩小比例；
  6. flex-basis；
  7.  */

order

Flex排序；

  • Example：
    /* 消除默认的边距影响 */
ul,li{padding: 0;margin: 0;}
li{list-style: none;}
    ```css ul{ background-color: #5a707b; height: 40px; width: 300px; display: flex; justify-content: flex-start; }

/ 可以使用js调整 order进行实现排序 / li{ flex: 1; outline: dashed 1px #fff; }

/ 粟子 / li:last-child{ order: 1; /默认值为：0/ } / 葡萄 / li:first-child{ order: 2; } / 菠萝 / li:first-child + li+li{ order: 3; }

```html
<ul>
    <li>1葡萄</li>
    <li>2苹果</li>
    <li>3菠萝</li>
    <li>4橘子</li>
    <li>5栗子</li>
    <li>6粟子</li>
</ul>

Flex 1

注意：是用在Item上，而非父元素上；

  • flex布局下，复元素设置高度，

    1. 子元素没有设置高度，子元素会继承父元素的高度；
    2. 但是宽度实必须设置的；

  • flex 1布局下，是平均填充剩余的控件，如果子元素没有设置宽度或没有添加flex 1，则不会显示；

/* 消除默认的边距影响 */
ul,li{padding: 0;margin: 0;}
ul{
    background-color: #5a707b;
    height: 100px;
    display: flex;
    width: 300px;
    /* 子元素设置了 flex1，复元素设置justify-content没什么效果 */
}

li{
    list-style: none;
    outline:1px  dashed #000;
    /*flex: 1; /*平分剩余空间*/
    /*    如果将所有的li添加了 flex:1后，
        那么再单独设置flex的宽度是无效的 */
}
li:first-child{
    background-color: yellow;
    width: 200px;
}
li:nth-child(2){
    background-color: #BACAD2;
    flex: 1; /*如果没有设置宽度,也没有设置flex 1则不会显示*/
}
li:last-child{
    background-color: darkgray;
    flex: 1;
}

ul>li*3

—— 父级元素

align-content属性

  1. align-items和align-content的区别；
  2. 关于align-items和align-content的区别和使用场景；
  3. 使用margin-right使得子元素移动到下一行的方式；

父级添加 flex-wrap：wrap ，这里的多行并非是多行的Flex，多行Flex直接可以使用 justify-content 来控制多个flex的对齐方式，这里的多行是溢出的多行；

可以用在处理单行与多行同时存在的情况，对于 align-content 。

  • Example1：

    /* 消除默认的边距影响 */
ul,li{padding: 0;margin: 0;}
li{list-style: none;}

    ul{
  background-color: #5a707b;
  height: 40px;width: 300px;
  display: flex;
  /* width: 100%; 占满可以使用stretch试试 */
  /* margin: 0 auto; 和margin: auto;效果一样：居中*/
  margin-left: auto;
}
li{
  flex: 1; /*直接平均填充,在不固定数量的时候不用给设置百分比*/
  outline: dashed  1px #fff;
}
.bosss{
  height: 200px;width: 500px;background-color: #BACAD2;
  display: flex;flex-wrap: wrap;
  /* flex-direction: column;justify-content: flex-end; */
  align-content: space-between;
}

    div.boss>
ul>li*3
ul>li*7
ul>li*4
ul>li*5

  • Example2：

    .ul{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-between;
  height: 300px;
}
.ul li{
  height: 20px;
  width: 25%;
  flex: unset;/*消除之前的flex:1*/
}

    ul.ul>li*10

Flex相关问题处理

1、flex 导致 vertical-align:middle无效的解决方案

flex布局时，vertical-align:middle无效) 

ul{
  display:flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  li{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    span{
     //empty 
    }
  }
}