CODEWITHSUNDEEP
cssmobilelayoutresponsive-designflexbox
Ultigma
Ultigma

Reputation: 535

Flexbox layout problems - flexbox item spanning multiple rows

I recently posted a similar question however I didn't get an answer I was looking for. Perhaps its because it's not possible. I thought i'd ask again with more detail. I currently have this layout, using flexbox, which I'm happy with.

Mobile Layout

But I want the ipad to have this layout

enter image description here

Using this html

<body>
  <header>Header</header>
  <p>image</p>
  <div class="main_content">Main Content</div>
  <div class="gallery_filter">Filter</div>
  <aside class="gallery_upload">Upload</aside>
  <div class="g_ads">Box</div>
  <footer>Footer</footer>
</body>

Without changing any HTML, is it possible to recreate that layout using flexbox. http://jsfiddle.net/V4GMK/

the fiddle isn't pretty, but i hope you get the idea. I just can't seem to get the layout i'm looking for.

Thanks for any help.

Upvotes: 2

Views: 1155

Answers (1)

Pixel Rubble
Pixel Rubble

Reputation: 1101

WITHOUT changing the HTML, I think this may be the direction you're wanting to go.

Here's an updated jsFiddle,

and here's the code in case that link every breaks:

<body>
    <header>Header</header>
    <p>image</p>
    <div class="main_content">Main Content</div>
    <div class="gallery_filter">Filter</div>
    <aside class="gallery_upload">Upload</aside>
    <div class="g_ads">Box</div>
    <footer>Footer</footer>
</body>

* {
    margin:0;
    padding:0;
}

body {
    display: flex;
    flex-flow: row wrap;
    height:100%;
}
body > * {
    padding: 10px;
    margin-right:10%;
    flex: 1 90%;
}
header {
    background: #ED1B24;
    height:35px;
}
footer {
    background: #7F7F7F;
}

.main_content {
    text-align: left;
    background: #A349A3;
    min-height:200px;
}

.gallery_filter {
    background: #FEAEC9;
}
p {
    background: #FF7F26;
    height:50px;
}
.gallery_upload {
    background: #00A3E8;
}
.g_ads {
    padding: 0;
    margin: 0;
    flex: 4 10%;
    background: #7092BF;
    height:100%;
    width: 10%;
    position: absolute;
    right: 0;
}
.gallery_filter, .gallery_upload { flex: 0 2 44%; margin:0; }

.main_content   { flex: 3 90%; }
header          { order: 2; }
p               { order: 3; }
.gallery_filter { order: 4; }
.gallery_upload { order: 5; }
.main_content   { order: 6; }
footer          { order: 7; }
.g_ads          { order: 1; }

As you can see, I didn't change your HTML at all.

Upvotes: 1

Related Questions