7

Prompt
Suppose we want to distribute a row of inline-block elements inside a div of flexible width, we consider the spaces on the far end of the first and last elements to be significant and should be part of the spacing.


Mark-up

<div id="whole-thing">
<!-- inline-block element, width shrinks to widest row -->
    
    <div id="row1" class="row">
    <!-- block element (100% width) -->

        <div id="box1" class="box">
        <div id="box2" class="box">
        ..
    </div>
    <div id="row2" class="row">
        ..
    </div>
    ..
</div>

Picture
I.e. Turn something like this
enter Original layout
into this:
enter Solution
In this case, the width of the whole thing shrinks up to the 2nd row (widest) so there's no spacing between any of the boxes on that row.
But the content in each boxes may vary, and the spacing should adjust accordingly if necessary:
enter image description here


Attempts

  1. justify-content: space-between (or other styling/work-arounds to the same effect): List item
    Is not what we want.

  2. justify-content: space-around should be it apart from the fact that it distribute the spaces with half-size spaces on either end, which, again, is not what we want, but almost..
    Compare:
    enter image description here
    enter image description here

  3. js hack. Well, it works, but I am still hanging on to the hope that there's a clean way to go about implementing this.

  4. Adding an empty div at the beginning and the end of every row div and then use space-between.
    Also works, and it's how I got the above pictures of the solution. But then I would end up with a bunch of empty divs.

Should I use table layout for this (in css, not in mark-up)? If so, how?

This is making me weep. I would be thankful for any help towards a clean solution to this.

Here's a link to fiddle


Solution

Fiddle

Placing content:'' ::before and ::after the rows (these pseudo-elements are direct children of the selected) effectively implements the 4th point above (space-between + empty elements at both ends) without redundant mark-up.

2
  • +1 - quick question - is the picture for #2 (justify-content: space-around) the same picture as the ideal? (I've been looking at it and I can't see the difference.) Aug 1, 2014 at 1:56
  • I couldn't at first as well, but it's easier to see if the width of the whole thing is wide relative to the width of the boxes. I've updated the picture to makes it clearer :)
    – Sylin
    Aug 1, 2014 at 2:29

1 Answer 1

7

I agree this should be covered by flexbox itself. Currently we only have space-around but it's just incomplete. ATM the best solution for you is to wrap rows inside two pseudo elements. Basically it's your solution, but you won't need to touch the actual markup since it's generated content.

http://jsfiddle.net/5rmUj/

.row::before, .row::after
{
    content:'';display:block;
    width:0;height:0;
    overflow:hidden;
}
4
  • Oh this is neat, thank you so much! What's the significance of the other styles apart from content:'' in this context? And I've tried something similar (firstbox::before + lastbox::after) that didn't work out. But then does your answer suggest that the ::before and ::after spawn as a direct child of the selected element (hence the space-between trick worked)?
    – Sylin
    Aug 1, 2014 at 4:59
  • 2
    I added them just to be sure that they don't take any space. you never know what UA could add to their default style. however at present day you can obviously remove them all safely, except content. Also yes, these two pseudo elements names are misleading, they should be renamed foo::before-contents and foo::after-contents since they are placed inside foo and not as siblings of foo :P
    – user652649
    Aug 1, 2014 at 5:08
  • 1
    Ah I see! I also tried putting borders on the rows and displaying the ::before/after content again and indeed they are enclosed within the borders. Misleading names indeed, but thanks again man! Learnt a lot of stuff besides the answer itself :)
    – Sylin
    Aug 1, 2014 at 5:14
  • This is brilliant. Took me a bit to realize the change of justify-content to space-between, but once I did that it worked like a charm! How do we petition the spec to be fixed? Or at least add a space-around-forreal option!!
    – BeniRose
    May 16, 2017 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.