Question

我最近发布了一个类似的问题但是我找不到我想要的答案。也许是因为它不可能。我想我会再详细询问一下。我目前有这个布局，使用flexbox，我很满意。

Mobile Layout

但我希望ipad有这个布局

enter image description here

使用此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>

不更改任何HTML，是否可以使用flexbox重新创建该布局。 http://jsfiddle.net/V4GMK/

小提琴并不漂亮，但我希望你明白这个想法。我似乎无法获得我正在寻找的布局。

感谢您的帮助。

Answer 1

没有更改HTML，我认为这可能是您想要的方向。

这里是updated jsFiddle，

以及以下链接每个中断时的代码：

<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; }

正如您所看到的，我根本没有更改您的HTML。

Flexbox布局问题 - 跨越多行的Flexbox项目

1 个答案: