Flexbox和溢出：滚动

Question

我试图在Flexbox中使用overflow-x:scroll获得25％宽度的元素。将有超过4个元素，所以我的目标是获得前4个中每个的25％，其余的可滚动。我目前的设置并不是每个元素返回25％。你能帮我吗？

感谢。

＆＃13;

＆＃13;

#wrapper {
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.cont25 {
  width: 25%;
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display: flex;
}

#novinky .flex {
  overflow-x: scroll;
}

＆＃13;

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您将width设置为25%，但忘记了边距。您可以使用较小的宽度计算完整显示此4项：width: calc(25% - 20px);，其中20px是每个项目左右margin的总和。这是一个例子：

＆＃13;

＆＃13;

#wrapper {
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.cont25 {
  width: calc(25% - 20px);
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display: flex;
}

#novinky .flex {
  overflow-x: scroll;
}

＆＃13;

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是你还增加了10px的保证金。将你的宽度更改为.cont25 div，我想你会得到你想要的东西。

width: calc(25% - 20px);

#wrapper {
  padding:0 10px;
  max-width:1400px;
  margin:0 auto;
}
.cont25 {
  width: calc(25% - 20px);
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display:flex;
}

#novinky .flex {
  overflow:scroll;
}

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
   </div>
  </div>
</div>