Flexbox: How to have either one row for all items or one row for each item

Question

I'm creating a responsive website. There are multiple boxes (blocks). All of those boxes contain three items (spans) and right now, the space between them is distributed equally by flexbox (space-between) like this:

|-----------------------------|
|                             |
| Item1      Item2      Item3 |
|                             |
|-----------------------------|

The container resizes according to the screen size. Now, if the container box is too small, they wrap like this:

|------------------|
|                  |
| Item1      Item2 |
| Item3            |
|                  |
|------------------|

Is there a media-query-less way to have this happen instead?

|-----------------------------|
|                             |
| Item1                       |
| Item2                       |
| Item3                       |
|                             |
|-----------------------------|

The current code looks like this:

<div class="project-details">
    <span>Title 1 <span>Content 1</span></span>
    <span>Title 2 <span>Content 2</span></span>
    <span>Title 3 <span>Content 3</span></span>
</div>

The important parts of the CSS:

.project-details {
  width: 100%;
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
  border: 1px solid black;
}
.project-details > span {
  font-weight: bold;
}
.project-details > span > span {
  font-weight: normal;
}

You can play around with it at https://codepen.io/BuenaJormax/pen/grVAGk

Basically, NO. There are possibilities with some extra hidden elements but I wouldn't recommend them. What's wrong with media queries? - http://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox — Paulie_D, Aug 26 '16 at 22:30
Adam Buchanan Smith: I added HTML/CSS now. @Paulie_D: Thanks! I wouldn't prefer using media queries because I want the style to adapt to the content and I won't always know the exact width of the items. — , Aug 26 '16 at 22:36
If its just the last div you're worried about looking awkard with 2 on top and 1 below half the container width you can do this https://jsfiddle.net/Hastig/0rf0tfy1/1/ (resize pane to see last div stretch 100% while first two are 50%) — Hastig Zusammenstellen, Aug 26 '16 at 22:44
@HastigZusammenstellen Thank you very much for taking some time to help me! Those items, however are simple spans containing only text, so your suggestion doesn't really solve my problem (I guess..? Or am I the one getting it wrong?) — , Aug 26 '16 at 22:54
Hmm, I'm not sure what you mean exactly but you can apply flex to spans or any element. — Hastig Zusammenstellen, Aug 26 '16 at 23:04
@HastigZusammenstellen That's true, but then I'm still getting this "1 span in one line, 2 spans in another line"-look, which is not what I'm looking for. (?) — , Aug 26 '16 at 23:08
My bad, I see more now what you wanted. I can't think of a way without JS or media queries but maybe some smart guy can. It was a fun question :) — Hastig Zusammenstellen, Aug 27 '16 at 01:47

cage rattler · Answer 1 · 2016-08-27T13:26:10.977

Something approaching this type of fluid layout can be accomplished without flex, using floats for example, but much prettier with.

Fiddle with text content and variable height.

HTML

<div class="flex">

  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
  <div> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>

CSS

body{
  font-family: tahoma, arial;
}

.flex {
  margin: 0;
  width: 100%;
  /* width needed for Firefox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex-wrap: wrap;
  -moz-box-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex-direction: row;
  -moz-box-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flex > div {
  /* % = flex-glow, flex-shrink, flex initial width  */
  -moz-box-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;

  height: auto;
  width: 100px;
  background-color: #e2e2e2;
  color: #222222;
  margin: 10px;
  padding: 10px;
}

Thank you very much for taking some time to help me! Those items, however are simple spans containing only text, so your suggestion doesn't really solve my problem (I guess..? Or am I the one getting it wrong?) — , Aug 26 '16 at 22:53
Coding with fixed heights left a little too much to the imagination. Updated with text content and variable heights. — cage rattler, Aug 27 '16 at 13:27
Thanks for explaining, but that's not what I'm looking for. Please have another look at the question and the linked example. — , Aug 27 '16 at 22:44
OK, your last comment above clarified your requirement for me. I agree with Hastig Zusammenstellen. Even if there is an obscure way to accomplish it in flex, your logic is much better suited to a media query. — cage rattler, Aug 28 '16 at 15:00

Flexbox: How to have either one row for all items or one row for each item

1 Answers1