相关疑难解决方法(0)

假设我们有一个宽度为400px的弹性容器.

在这个容器里面有三个flex项:

:nth-child(1) { flex: 0 2 300px; }   /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }

因此,flex项的总宽度为600px,容器中的可用空间为-200px.

在这个问题,本文和flexbox规范的帮助下,我学会了在flex项目中分配负空闲空间的基本公式:

步骤1

将每个收缩值乘以其基础并将它们全部加在一起:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

总计= 1000

第2步

将上面的每个项目除以总数来确定收缩因子:

:nth-child(1)  600 / 1000 = .6
:nth-child(2)  200 / 1000 = .2
:nth-child(3)  200 / 1000 = .2 …

我不会一起思考flex-shrink和flex-wrap:wrap;理解,但我想知道是否有一些我缺少的东西.

.container{
  background: #DDD;
  width: 300px;
  height: 100px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap
}
.tags{
  background: orange;
  box-sizing: border-box;
  flex: 1 3 200px;
}
.redes{
  background: cyan;
  box-sizing: border-box;
  flex: 0 1 200px;
}
.wrap{
  flex-wrap: wrap;  
}

<div class="container">
  <div class="tags">box1</div>
  <div class="redes">box2</div>
</div>
<div class="container wrap">
  <div class="tags">box1</div>
  <div class="redes">box2</div>
</div>

据我所知,当flex-wrap设置为nowrap时,负空间将使用值进行分配flex-shrink.同时,如果flex-wrap设置为包裹,则不会有任何负面空间,可以吗？因此这个属性是没用的,或者至少我可以看到任何效果.这是正确的吗？