flex布局-使用

• checkbox的布局

描述：antd使用<nz-checkbox-group [(ngModel)]="checkOptionsOne" ></nz-checkbox-group>布局的时候，checkbox选项是在同一行的，但是选项有长有短，换行后并不好看；那么我们使用display:block;后，可以每一个选项占一行，但是，因为是块级元素，那么空白处随便点击一下都可以选中或者取消checkbox框，交互很差；
a. hover的时候给checkbox行增加背景颜色（其他问卷这么操作），给用户交互体验。
b. checkbox使用flex布局，那么可以为非block元素，只有内容长度，实现了效果；

.ant-checkbox-group {
    font-size: 12px;
    display: flex;
    flex-direction: column;

    align-items: flex-start; // 默认交叉轴为stretch，现在是非stretch状态，有多长，占多少位置。

}

• flex-item不足的时候

<style>
    * {
        padding: 0;
        margin: 0;
    }
    li{
        list-style-type: none;
        box-sizing: border-box;
        border: 1px solid #000;
        width: 100px;
    }
    ul{
        display: flex;
        width: 600px;
         background: #b6e4ff;
         
		/*默认是stetch，后两个盒子跟第一个等高*/
        /*align-items: flex-start;*/ 
    }
</style>
<div class="box">
    <ul>
        <li>是不是要换行的是不是要换行的是不是要换行的</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

问题：
1.w是生效的，且没有占用剩余的控制位置（没有设置flex:1;）
2.h也是根据最高的 flex-item自适应的！
3.角色管理时候，一级，二级，三级是否用flex更有效

• flex-item超长的时候

<style>
    * {
        padding: 0;
        margin: 0;
    }
    li{
        list-style-type: none;
        box-sizing: border-box;
        border: 1px solid #000;
        width: 100px;
    }
    ul{
        display: flex;
        width: 600px;
        background: #91eef8;
    }
    .no-shrink{
        /*flex-shrink: 0;*/
    }
</style>
<div class="box">
    <ul>
        <li>是不是要换行的是不是要换行的是不是要换行的</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li class="no-shrink">9</li>
        <li>10</li>
    </ul>
</div>

问题：
1.放不下的时候，默认不换行，且w无效了，且所有的flex-item都缩小了（没有设置flex-shrink属性）
2.有一个盒子h比较高，所有flex-item都跟随同样的高（默认stretch）

• flex-item超长的时候，且flex-wrap:wrap

<style>
    * {
        padding: 0;
        margin: 0;
    }
    li{
        list-style-type: none;
        box-sizing: border-box;
        border: 1px solid #000;
        width: 100px;
    }
    ul{
        display: flex;
        width: 600px;
        flex-wrap:wrap;
        background: #91eef8;
    }
    .item{
    	/*wrap失效 ，都又在同一行，且缩小了*/
        /*flex:1;*/

		/*这种布局方式*/
		/*flex:1 1 20%;*/
    }
</style>
<div class="box">
    <ul>
        <li class="item item1">是不是要换行的是不是要换行的</li>
        <li class="item item2">2</li>
        <li class="item item3">3</li>
        <li class="item item4">4</li>
        <li class="item item5">5</li>
        <li class="item item6">6</li>
        <li class="item item7">7</li>
        <li class="item item8">8</li>
        <li class="item item9">9</li>
    </ul>
</div>

问题：
1.设置的w有用了，且flex-item没有缩放，会换行
2.同一行的盒子会自适应最高的盒子；上、下行的h互不影响（只受同一行最高高度的影响）

<style>
    * {
        padding: 0;
        margin: 0;
    }
    li{
        list-style-type: none;
        box-sizing: border-box;
        border: 1px solid #000;
        width: 100px;
    }
    ul{
        display: flex;
        width: 600px;
        flex-direction: column;
        height: 300px;
         background: #91eef8;
    }
    .item{
        flex:1;
    }
</style>
<div class="box">
    <ul>
        <li class="item item1">我是文字比较多的，可能会换行呀</li>
        <li class="item item2">2</li>
        <li class="item item3">3</li>
    </ul>
</div>

问题：flex:1;只会占用主轴方向的剩余空间；且是所有的 flex-item都占用（给所有item都设置了flex:1;的属性）

<style>
    * {
        padding: 0;
        margin: 0;
    }
    li{
        list-style-type: none;
        box-sizing: border-box;
        border: 1px solid #000;
        width: 100px; /*注释看一下*/
    }
    ul{
        display: flex;
        width: 600px;
        flex-direction: column;
        height: 300px;
        background: #91eef8;
    }
    .item{
        flex:1;
    }
</style>
<div class="box">
    <ul>
        <li class="item item1">是不是要换行的是不是要换行的是不是要换行的是不是要换行的是不是要换行的是不是要换行的</li>
        <li class="item item2">2</li>
        <li class="item item3">3</li>
    </ul>
</div>

所有item在设置flex:1;后，
如果item1的h没有所有item均分后的h大，那么取均分后的值；
如果item1的h比所有item均分后的h大，那么item1的h没有变化，其他的item均分剩余的空间；

注：此时：li的 w是生效的，并没有stretch；