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

【问题标题】：Flexbox layout problems - flexbox item spanning multiple rowsFlexbox 布局问题 - 跨越多行的 flexbox 项目
【发布时间】：2014-08-04 07:07:46
【问题描述】：

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

但我希望 ipad 有这个布局

使用这个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/

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

感谢您的帮助。

【问题讨论】：

恐怕这对于 Flexbox 不更改 HTML 是不可能的。要获得第二个布局，您需要一个容器围绕最左侧区域，另一个围绕所有其余区域。使用网格布局更容易解决这个问题，目前缺乏任何合理的浏览器支持：caniuse.com/css-grid
啊，我很担心这个。我最终将它包裹在一个 div 标签周围，它就是这样工作的。只是好奇，你会在什么时候对自己说，“我现在将把它应用到网站中，即使它没有得到广泛支持”？例如，您会使用仅支持 60% 的东西吗？谢谢@stephenhay
我现在在生产中使用 Flexbox。你绝对可以而且应该。也就是说，我将它用于组件（这是它擅长的地方）而不是页面布局。通常，后备很简单（display:table、display:inline-block 等），但您必须接受后备的工作方式略有不同。对于不会破坏网站的东西，我会在规范稳定后尽快使用它们。 Flexbox 是，Grid 不是。

标签： css mobile layout responsive-design flexbox

【解决方案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。

【讨论】：