Flex布局手机端左滑出功能示例

[TOC]

## 1. 使用css实现左滑出示例一

**效果展示：**

![](/UploadFiles/images/20220609/6379037666953889682201073.png)

**示例代码如下：**

+ **CSS代码**

```CSS
.gx-list { background-color: #fff; width: 100%; margin: 0rem auto 0.3rem auto; border-radius: 0.4rem; overflow-x: scroll;}
.gx-list-gxitem { padding: 0.6rem 0.6rem 0.3rem 0.6rem; width: 130%; display: flex;}
.gx-list::-webkit-scrollbar{ display:none; }
.gx-list-show{display: flex;flex-direction: column;width: 100%;}
.gx-list-bnt{width: 30%;padding-left: 0.6rem;display: flex;flex-direction: column;}
```

+ **HTML代码**

```HTML
<div class="gx-list">
    <div class="gx-list-gxitem">
        <div class="gx-list-show">
        </div>
        <div class="gx-list-bnt">
            <div class="div1"><img class="img1" src="./images/mt/visit.png"><a
                    href="javascript:void(0)">**</a></div>
            <div class="div2"><img class="img2" src="./images/mt/remark.png"><a
                    href="javascript:void(0)">**</a></div>
            <div class="div3" data-unitId="1"><img class="img3" src="./images/mt/phone.png"><a
                    href="javascript:void(0)">****</a></div>
        </div>
    </div>
    <div class="gx-list-gxitem">
        <div class="gx-list-show">
        </div>
        <div class="gx-list-bnt">
            <div class="div1"><img class="img1" src="./images/mt/visit.png"><a
                    href="javascript:void(0)">**</a></div>
            <div class="div2"><img class="img2" src="./images/mt/remark.png"><a
                    href="javascript:void(0)">**</a></div>
            <div class="div3" data-unitId="1"><img class="img3" src="./images/mt/phone.png"><a
                    href="javascript:void(0)">****</a></div>
        </div>
    </div>
</div>
```

> 说明：gx-list-gxitem 列表块的需要定宽，示例之中就定了宽度为130%；100%用来给正常显示的部分 gx-list-show，30%给需要左推出来的部分 gx-list-bnt，在通过父级 gx-list 来隐藏掉多出来的30%，gx-list-gxitem 的子项要使用 flex-direction：column 来控制子项元素主轴为X轴，这样一个简单的左滑出功能就实现了，::-webkit-scrollbar 用来隐藏掉浏览器自带的滚动条

## 2. 使用css实现左滑出示例二

使用 css 实现下图的左滑出功能，上面的示例我们已知显示和隐藏的宽度，下面的示例是对 flex 子项不确定宽度的应用，下图中的左图同样使用上面的方法但未能实现左滑动效果而是压缩了子项的宽度。右图则实现了左滑功能。

**效果展示：**

![](/UploadFiles/images/20220609/6379038061575878524024339.png)

**示例代码如下：**

+ **CSS代码**

```CSS
.seat-con-body{width:100%;max-height: calc(100% - 5rem);overflow-y:scroll;}
.seat-con-body::-webkit-scrollbar{ display:none; }
.seat-con-c{width: 100%; max-height: calc(100% - 5rem);display: flex;color:#333;}
.seat-con-cl{ border-right: 1px solid #EDEFF2; padding:0rem 0.5rem;}
.seat-con-body .seat-con-cl:last-child{border:0 ;}
.seat-con-cl div{ padding-top: 0.7rem;white-space: nowrap}
```

+ **HTML代码**

``` HTML

<div class="seat-con-body">
    <div class="seat-con-c">
        <div class="seat-con-cl">
            <div><i class="cur">✔</i><label>A楼#新增测试路道1号之一</label></div>
            <div><i>✔</i><label>A楼#新增测试路道1号之一</label></div>
            <div><i>✔</i><label>A楼#新增测试路道1号之一</label></div>
        </div>
    </div>
</div>
```

> 说明：使用 flex 布局时，我们不知道子项的宽度，如果直接使用 flex-direction ：column 来布局导致文字换行，子项宽度压缩。我们只要给子项元素加上 white-space : nowrap 属性强制子项元素不换行，那么浏览器会自动计算出子项宽度，迫使父级在X轴上溢出，就实现了左滑效果了。