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

Question

Apologies if I am not clear. I am showing three div boxes in each row and extending them through Flex to make sure they adapt to multiple displays.

What happens is that they unfortunately stretch to maximum width if the second row has less than three divs.

I want that even if there are two divs in the second row, it should have the same width as top row items.

For examples see this picture:-

Here is what I am doing:-

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

Thanks a lot.

Answer 1

You just need to tell the boxes not to grow.

.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">wu</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

Here's what you have in your code:

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

When you specify flex: 1 you are saying (in shorthand): flex-grow: 1 , flex-shrink: 1 and flex-basis: 0 .

flex-grow: 1 tells flex items to distribute all available space among themselves, which is why they evenly stretch across the maximum width of the container.

If you don't want a flex item to grow, specify flex-grow: 0 or flex: 0 .