43

I have a flex item that has three divs inside of it.

┌────────────────────────────────────────┐
|                WRAPPER                 |
|   ┌─────────┬───────────┬──────────┐   |
|   |  LEFT   |   CENTER  |   RIGHT  |   |
|   |         |           |          |   |
|   └─────────┴───────────┴──────────┘   |
└────────────────────────────────────────┘

And I want to move the center column to the next line in small screens (less than 600px). It should occupy the 100% of the width of the screen.

The problem I have is that when the center column comes to the next line, the right column does not fit on the wrapper.

Here is my HTML code:

<div id="wrapper">
    <div class="block left">Left</div>
    <div class="block center">Center</div>
    <div class="block right">Right</div>
</div>

Here is my CSS code:

html, body{
  height: 100%;
}

body{
  margin: 0;
}

#wrapper{
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  text-align: center;
}

.block{
  height: 50px;
}

.left{
  width: 20%;
  background-color: red;
  order: 1;
}

.center{
  width: 60%;
  background-color: green;
  order: 2;
}

.right{
  width: 20%;
  background-color: blue;
  order: 3;
}

@media all and (max-width: 600px) {
  #wrapper{
    flex-flow:column wrap; 
    height: 100px;
  }
  .center {
    width: 100%;
    order: 3;
  }

  .left{
    width: 50%;
  }
}

JSFiddle where you can see how it is displayed.

Is it possible to move the middle column to the next line occupying 100% of the width of the screen using flexbox? If it is, what am I missing?

Thanks in advance!

3 Answers 3

40

Something like this?

https://jsfiddle.net/wqLezyfe/2/

@media all and (max-width: 600px) {
  #wrapper{
    flex-wrap:wrap;
    height: 100px;
  }
  .center {
    width: 100%;
    order: 3;
  }

  .left{
    width: 50%;
  }
  .right{
    width:50%;
    order:2;

  }
}
4
  • Yeah! Exactly this! So it seems that the problem was that I have to use flex-wrap: wrap instead of column wrap. Right? Commented Apr 29, 2016 at 0:23
  • yep! that was the problem :-P
    – QoP
    Commented Apr 29, 2016 at 0:24
  • Can you explain a bit more on your question please? I suppose it is because wrap makes the overflow element comes down and the column-wrap just displays them as a column. Am I right? Commented Apr 29, 2016 at 0:26
  • well that column-wrap was incorrect because you wanted to use rows, I know it sounds weird but that's how display flex works, you can take a look at css-tricks.com/snippets/css/a-guide-to-flexbox where it explains the flex-direction property properly.
    – QoP
    Commented Apr 29, 2016 at 0:29
7

This was nearly what I needed, but not quite. My issue was that I have a collection of settings, all of which have a label, a selected option and a button. When there's not space for all 3 of them I need the option to wrap to the next line. As the labels and options can be a huge variety of values and combinations I need the solution to react to the length of the text. I also really want it to only wrap when it's necessary. The point of responsive is to make it better for smaller screens, not have them scrolling all the time!

The solution I found was to wrap the first 2 items in an inner wrapper with flex-direction: row; so that when it wraps the items will stack vertically. Then the inner wrapper and the buttons need to be denied wrapping with flex-wrap: nowrap; so they will always align horizontally.

The result is 3 items on a row, and the middle one wraps.

Alt 1 If you need the 1st item to be the one that takes up all the remaining space, just move flex-grow: 1; to the .left

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
  text-align: center;
  
  outline: 1px solid rebeccapurple;
}

.inner-wrapper {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.block {
  height: 50px;
}

.left {
  background-color: red;
}

.center {
  background-color: green;
  flex-grow: 1;
}

.right {
  background-color: blue;
}

label {
    display: block;
    margin: 1em;
}
label:has( #embiggen:checked ) ~ div#wrapper #centerDiv {
    min-width: 800px;
}
<div id="wrapper">
  <div class="inner-wrapper">
    <div class="block left">LeftLeftLeft</div>
    <div class="block center" id="centerDiv">CenterCenterCenter</div>
  </div>
  <div class="block right">RightRightRight</div>
</div>

JSFiddle Example

Alt 2 If you need the middle item to wrap beneath the .right item, which is the button in my case, then you need to put the .center and .right items in the inner-wrapper instead and in reverse order. To overcome the reversing of the order we need to add flex-direction: row-reverse to the inner-wrapper, and you need to give the .right class a margin-left: auto; so that it sits over to the right.

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
  text-align: center;

  outline: 1px solid rebeccapurple;
}

.inner-wrapper {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.block {
  height: 50px;
}

.left {
  background-color: red;
}

.center {
  background-color: green;
  flex-grow: 1;
}

.right {
  background-color: blue;
  margin-left: auto;
}

label {
    display: block;
    margin: 1em;
}
label:has( #embiggen:checked ) ~ div#wrapper #centerDiv {
    min-width: 800px;
}
<div id="wrapper">
  <div class="block left">LeftLeftLeft</div>
  <div class="inner-wrapper">
    <div class="block right">RightRightRight</div>
    <div class="block center" id="centerDiv">CenterCenterCenter</div>
  </div>
</div>

Right-align JSFiddle example

6
  • 1
    plus 1! this is pure genius! Commented May 22, 2022 at 12:51
  • In your second example, when I make the CenterCenterCenter part bigger it causes RightRightRight to wrap below CenterCenterCenter (in both SO Snippet and your original JSFiddle link) which is contrary to what you said: "If you need the middle item to wrap beneath the .right item..." - can you elaborate on that?
    – Dai
    Commented Apr 26, 2023 at 0:13
  • You're quite right, @Dai. I don't know how that's stood for so long, but I've updated the code to wrap the center under the right in example 2 now. Thanks
    – Red
    Commented Apr 26, 2023 at 15:40
  • @Red I added those checkboxes because the SO snippet window can’t be shrunk below ~500px making it impossible to force a wrap to see the effect-in-question - if the checkboxes weren’t working for you it means you’re using an old web-browser that doesn’t support CSS :has() - all major browsers support it: caniuse.com/css-has (update: Hm, except Firefox - I thought Firefox did support it by now…)
    – Dai
    Commented Apr 27, 2023 at 3:53
  • Hi @Dai, in the jsFiddle window you can grab the separator to the left of the bottom right window and resize to any size within the main window to test responsiveness
    – Red
    Commented Apr 27, 2023 at 8:53
4

You're using flex-flow:column wrap; when you want to use flex-flow: row wrap. And your divs are out of order—you want the .center div to be last. Flexbox orders divs based on ascending values.

html, body{
  height: 100%;
}

body{
  margin: 0;
}

#wrapper{
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  text-align: center;
}

.block{
  height: 50px;
}

.left{
  width: 20%;
  background-color: red;
  order: 1;
}

.center{
  width: 60%;
  background-color: green;
  order: 2;
}

.right{
  width: 20%;
  background-color: blue;
  order: 3;
}

@media all and (max-width: 600px) {
  #wrapper{
    flex-flow: row wrap; 
    height: 100px;
  }
  .center {
    width: 100%;
    order: 3;
  }
  .right {
    order: 2;
  }
  
  .left{
    width: 50%;
    order: 1;
   
  }
}
<div id="wrapper">
    <div class="block left">Left</div>
    <div class="block center">Center</div>
    <div class="block right">Right</div>
</div>

1
  • Thank you very much! I upvote you because I cannot accept both answers but both answers helped to me :) Commented Apr 29, 2016 at 0:28

Your Answer

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

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