今天在写一个原生方法实现移动端 tab 栏拖拽滑动的效果时,用 js 定位修改定位,写了一长串代码,感觉很累赘,于是尝试了一下纯 css 的 flex 方法,发现很好用,因为之前用的很少,不太熟悉,各位看官轻喷。
下面是结构
<ul class="tab-head">
<li class="select">开发者资讯</li>
<li>ios</li>
<li>c++</li>
<li>Android</li>
<li>css</li>
<li>数据</li>
<li>区块链</li>
<li>go</li>
<li>产品</li>
<li>后端</li>
<li>linux</li>
<li>人工智能</li>
<li>php</li>
<li>javascript</li>
<li>架构</li>
<li>前端</li>
<li>Python</li>
<li>java</li>
<li>算法</li>
<li>面试</li>
<li>科技动态</li>
<li>jd</li>
<li>设计</li>
<li>数码产品</li>
<li>html</li>
<li>软件测试</li>
<li>测试开发</li>
</ul>
废话不多说,上样式.
.tab-head {
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
overflow: auto; /*这个是将多余的部分自动转化成滚动条隐藏*/
}
.tab-head::-webkit-scrollbar {
display: none; /* 隐藏滚动条,webkit内核浏览器中有效(Chrome,Safari)*/
}
ul li {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto; /*这行代码就解决了拖动问题*/
color: white;
margin: 0 5px;
background: #ccc;
}
通过查资料, 在 子元素 上设置的flex属性有三个值, 分别是flex-grow
、flex-shrink
、flex-basis
flex-grow
该属性用来设置当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。 flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害。
打比方: 父元素宽度300px, 两个子元素宽度分别是100px, 当子元素设置flex: 0 1 auto
时,多余的100px空间会自动分给两个子元素,也就是两个子元素宽度都是150px,
flex-shrink
该属性用来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。 flex-shrink的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。
flex-shrink: 0
表示不挤压子元素的宽度
flex-basis
该属性用来设置元素的宽度,其实,width也可以设置宽度。如果元素上同时设置了width和flex-basis,那么width 的值就会被flex-basis覆盖掉。
我们这里让元素默认撑开
这里讨论几个默认情况
当flex:none
等价于设置 flex: 0, 0, auto
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
当
flex: auto
等价于设置 flex: 1 1 auto
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
当
flex
取到一个非负数 则该数字为flex-grow
值 (重要)
如flex: 1
等价于
.item {
flex-grow: 1; /这是将flex的值赋值/
flex-shrink: 1;
flex-basis: auto;