Even Flexbox product grid with left alignment

Question

I'm trying to get a nice Flexbox grid to use with ecommerce products, but can't quite get it to do what I want.

Here is a demo http://jsbin.com/acejes/9/edit

It may not be possible, I just wanted to check if there's anything else I can do.

Here is my aim…

Must be a percentage based grid
The first and last column flush against the sides of the container
The last row "floats" left

My question is kind of similar to How to align left last row/line in multiple line flexbox, but I specifically want to use %s for the "columns" — I think it's neater and it means I know I'm going to have, say 3 columns in a row if I use a % like 32.5%

I'm almost there, but the last line is being thrown out because of the justify-content property. I'd like the last row to be "floated" left:

Almost, except the last row

Code

It's easier to see my code in the jsbin above, but for the sake of preservation, here is a small snapshot:

<div id="flexbox">
    <div class="column">
        <img src="http://placehold.it/350x150" title="" alt="" />
    </div>
    <div class="column">
        <p class="product-title">Decorated Pink High Heels</p>
        <p class="product-price">$25.99</p>
        <p class="product-title">Decorated Pink High Heels</p>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

#flexbox {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
    border: 3px solid black;
}

#flexbox .column {
    width: 22%;
    margin-bottom: 30px;
    background-color: red;
}

img {
  max-width: 100%;
}

Nothing has changed with Flexbox since the question you linked to was posted. If you're looking to have the space distributed equally between the items *and* have the last row line up with the previous rows when it has less content, you're out of luck. What you're looking for can already be done without Flexbox by specifying your margins using percentages. — cimmanon, Aug 13 '13 at 20:40
Thanks, but using margins would prevent the "columns" from being flush against the edges, right? — SparrwHawk, Aug 13 '13 at 20:52
You can use negative margins: http://codepen.io/cimmanon/pen/dwbHi — cimmanon, Aug 13 '13 at 22:54
Hey cimmamon, thanks for the suggestion. It's a good trick but I don't think it will solve me wanting to flush both sides of the container. You're right though, this can be done without Flexbox; it's just not quite as lean (but maybe it will be after a bit of Sass). I've managed to do this using advanced selectors http://jsbin.com/acejes/14/edit — SparrwHawk, Aug 14 '13 at 00:44

SparrwHawk · Answer 1 · 2013-08-14T09:28:33.303

I don't think this exact solution can be achieved with Flexbox, but you can use advanced selectors instead like this http://jsbin.com/acejes/14/edit

<div class="l-col_33--all">
    <div class="l-col l-col_33">
        <div class="l-col l-col_50">
            <img src="http://placehold.it/350x150" title="" alt="" />
        </div>
        <div class="l-col l-col_50">
            <p class="product-title">1st product Decorated Pink High Heels</p>
            <p class="product-price">$25.99</p>
            <p class="product-title">Decorated Pink High Heels</p>
        </div>
    </div>

    <div class="l-col l-col_33">
        <div class="l-col l-col_100">
            <img src="http://placehold.it/350x150" title="" alt="" />
        </div>
        <div class="l-col l-col_100">
            <p class="product-title">2nd product Decorated Pink High Heels</p>
            <p class="product-price">$25.99</p>
        </div>
    </div>


    <div class="l-col l-col_33">
        <div class="l-col l-col_50">
            <img src="http://placehold.it/350x150" title="" alt="" />
        </div>
        <div class="l-col l-col_50">
            <p class="product-title">3rd product Decorated Pink High Heels</p>
            <p class="product-price">$25.99</p>
        </div>
    </div>
</div>


<style>

img {
  max-width: 100%;
}

body {
  border: 1px solid black;
}

p {
  padding-right: 10px;
  padding-left: 10px;
}

/* E.g. Use an "--all" modifier class on a div wrapper to flush columns against their     container */ 

.l-col_33--all .l-col_33 {
  width: 32%;
  margin-bottom: 40px;
  background-color: red;
}

.l-col_33--all .l-col_33:nth-child(1),
.l-col_33--all .l-col_33:nth-child(3n+1) {
  margin-right: 2%;
  border-bottom: 3px solid green;
}
.l-col_33--all .l-col_33:nth-child(3),
.l-col_33--all .l-col_33:nth-child(3n) {
  margin-left: 2%;
    border-bottom: 3px solid blue;
}

/* Clear rows */
.l-col_33--all .l-col_33:nth-child(3n+1) {
    clear: left;
}

.l-col_33--all:after { /* clearfix */
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.l-col {
    position: relative;
    float: left;
}

.l-col_33 {
  width: 33%;
}
</style>

Even Flexbox product grid with left alignment

Code

CSS

1 Answers1

Linked