2

I have a grid system that uses flexbox. At present I'm trying to work out if I can make it work with the following scenario.

<div class="flex-outer">
    <div class="flex-inner span-all red-box">
        <h2>Title</h2>
    </div>
    <div class="flex-inner span-1of2 green-box">
        <div>Some text</div>
    </div>
    <div class="flex-inner span-1of2 blue-box">
        <p>A table perhaps</p>
    </div>
</div>

.flex-outer {
    display:flex;
    flex-wrap:wrap;
}
.span-all {
    width:100%;
}
.span-1of2 {
    width:50%;
}
.red-box {
    background-color:Red;
}
.green-box {
    background-color:Green;
}
.blue-box {
    background-color:blue;
}

The html above could be used to create the following layout:

enter image description here

However on a certain breakpoint, I'd be looking to change the layout to something like this:

enter image description here

I can change the order of the green and blue boxes to suit, but on wrapping, the second box is position below the blue box. This is the behaviour I expected.

enter image description here

So, are there any flexbox tricks I can use to tuck the green box immediate beneath the red one?

Asons
  • 84,923
  • 12
  • 110
  • 165
John Ohara
  • 2,821
  • 3
  • 28
  • 54
  • 1
    Change `flex-direction` to `column`, maybe? – Niet the Dark Absol Nov 10 '17 at 12:30
  • @NiettheDarkAbsol - this would surely result in a 1-column wide structure. I'm looking to preserve 2 columns. – John Ohara Nov 10 '17 at 12:39
  • I don't consider this question a duplicate as the previous question was not fully answered - a workaround was provided that involved pure floats - that's not what I'm looking for. Other's here may have a better answer. – John Ohara Nov 10 '17 at 13:00
  • Here is the dupe links solution applied to your code: https://jsfiddle.net/jt7e75oc/ – Asons Nov 10 '17 at 13:01
  • And here with fixed height's and Flexbox column, and no `float`: https://jsfiddle.net/jt7e75oc/1/ – Asons Nov 10 '17 at 13:06
  • Besides these 2 (you could use absolute position on the blue box, though consider `float` better), there is no Flexbox CSS way to accomplish what you ask. – Asons Nov 10 '17 at 13:07
  • possible duplicate: https://stackoverflow.com/q/34480760/3597276 – Michael Benjamin Nov 10 '17 at 13:12
  • @Michael_B Thanks...added it as a dupe link – Asons Nov 10 '17 at 13:14
  • @JohnOhara The linked answers does not have _pure float_, the first combine Flexbox with float, to achieve what you asked, the other link + my 2nd fiddle demo, use other _tricks_ to make accomplish your layout, as Flexbox can't alone (unless fixed height is used with Flexbox column, which my 2nd sample use) – Asons Nov 10 '17 at 13:26

0 Answers0