子元素上flex的属性详解

今天在写一个原生方法实现移动端 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;