强制 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%;
}

* {
  -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;
}

<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>

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 时（在 shorthand 中）：flex-grow: 1、flex-shrink: 1 和 flex-basis: 0。

flex-grow: 1 告诉 flex 项目在它们之间分配所有可用的 space，这就是为什么它们均匀地伸展到容器的最大宽度。

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

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

Forcing Flex Div items to maintain their width when stretching

html

css

jquery

flexbox

HTML

CSS