拉伸时强制Flex Div项目保持其宽度

Question

如果我不清楚，请道歉。我在每行显示三个div框并通过Flex扩展它们以确保它们适应多个显示器。

如果第二行少于三个div，它们会不幸地伸展到最大宽度。

我希望即使第二行中有两个div，它也应该与顶行项目具有相同的宽度。

例如，请看这张图片： -

以下是我正在做的事情： -

HTML

<div class="flex-div-list">  

        <div class="flex-box">
            <div class="info-box">
              <span class="extra-large">1234</span>Netus ultrices ullamcorper a mus nunc c
            </div>

            <div class="clearfix"></div>
        </div>
        <div class="flex-box">

            <div class="info-box">
              <span class="extra-large">824</span>onsectetur rhoncus aenean pharetra vulputate.
            </div>

          <div class="clearfix"></div>
        </div>
        <div class="flex-box">

            <div class="info-box">
              <span class="extra-large">XYZ%</span>onsectetur rhoncus aenean pharetra
            </div>

            <div class="clearfix"></div>
        </div>
        <div class="flex-box">

            <div class="info-box">
              <span class="extra-large">w-u</span>etur rhoncus aenean pharetra vulputate
            </div>

            <div class="clearfix"></div>
        </div>
        <div class="flex-box">

            <div class="info-box">
              <span class="extra-large">PODW</span>Penatibus vivamus natoque                          
            </div>

          <div class="clearfix"></div>
        </div>

</div>

CSS

.flex-div-list {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: left;
}

.flex-box {
    float: left;
    padding: 5% 3% 1% 0%;
    width: 33.3%;
    height: auto;
    flex: 1;
    flex-basis: 33%;
}

.info-box {
    border: 1px #fff solid;
    padding-left: 10px;
    font-size: 1.7em;
    color: #fff;
    text-align: center;
    height: 9em;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 32px;
    overflow: hidden;
}

非常感谢。

Answer 1

你只需要告诉不这些方框。

.flex-box {
    /* float: left; */
    /* overridden by flexbox */
    flex: 0 0 33.3%;
    padding: 1%;
}

＆＃13;

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: blue;
}
.flex-div-list {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: center;
}
.flex-box {
  /* float: left; */
  /* overridden by flexbox */
  flex: 0 0 33.3%;
  padding: 1%;
}
.info-box {
  border: 1px #fff solid;
  padding-left: 10px;
  font-size: 1.7em;
  color: #fff;
  text-align: center;
  height: 6em;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 32px;
  overflow: hidden;
}

＆＃13;

<div class="flex-div-list">
  <div class="flex-box">
    <div class="info-box"> <span class="extra-large">1234</span>Netus ultrices ullamcorper a mus nunc c</div>
  </div>
  <div class="flex-box">
    <div class="info-box"> <span class="extra-large">824</span>onsectetur rhoncus aenean pharetra vulputate.</div>
  </div>
  <div class="flex-box">
    <div class="info-box"> <span class="extra-large">XYZ%</span>onsectetur rhoncus aenean pharetra</div>
  </div>
  <div class="flex-box">
    <div class="info-box"> <span class="extra-large">w-u</span>etur rhoncus aenean pharetra vulputate</div>
  </div>
  <div class="flex-box">
    <div class="info-box"> <span class="extra-large">PODW</span>Penatibus vivamus natoque</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle Demo

Answer 2

以下是您的代码中的内容：

.flex-box {
    float: left;
    padding: 5% 3% 1% 0%;
    width: 33.3%;
    height: auto;
    flex: 1;
    flex-basis: 33%;
}

当您指定flex: 1时（简写）：flex-grow: 1，flex-shrink: 1和flex-basis: 0。

flex-grow: 1告诉flex项目在它们之间分配所有可用空间，这就是它们在容器的最大宽度上均匀伸展的原因。

如果您不希望增加弹性项目，请指定flex-grow: 0或flex: 0。