使用 flexbox 设置布局答案

【问题标题】：Setting layout with flexbox使用 flexbox 设置布局
【发布时间】：2016-12-19 20:37:12
【问题描述】：

我在下面有一个线框，想看看用flexbox 编码的最佳方法是什么。

我编写了simple flexbox grid system，但我的线框需要比我的网格系统更多的自定义。

我的父 div 有 display: flex，有 2 个子 div 有 flex:1 和 flex: 0 0 40%。添加内容 div（蓝色和红色内部的灰色框）将与主包装器的其余部分保持一致（整个灰色框设置为 max-width: 1400px）的最佳方法是什么？

谢谢。

【问题讨论】：

重复 - stackoverflow.com/questions/28565976/…
@Paulie_D 是的，会有背景图片和颜色。这是完全不同的问题（布局），另一个甚至不使用flexbox
目前这要么是重复的，要么是基于意见的，并且可能会被关闭。如果您可以删除问题的“最佳方式”部分并着手解决您遇到的实际问题，它可能会受到更多积极的关注。即便如此，我认为这是我链接的问答的副本。
@Paulie_D 他们是完全不同的问题，哈哈
技术并不完全相同。每边都有一个定位的伪元素，具有适当的宽度和定位...相同的原则。

标签： css layout flexbox flexboxgrid

【解决方案1】：

这是一般的想法。

定位的伪元素，行的每个部分一个。具有合适的宽度（注意body 应该有overflow-x:hidden）和适当的定位值。

* {
  box-sizing: border-box;
}
body {
  overflow-x: hidden;
}
.wrapper {
  min-height: 100vh; /* for demo purposes */
  width: 60%;
  margin: auto;
  background: grey;
  display: flex;
  flex-direction: column;
}
header {
  height: 20vh;
  background: green;
}
.inner {
  height: 30vh;
  display: flex;
}
main {
  background: blue;
  flex: 1;
  border: 2px solid black;
}
aside {
  background: red;
  flex: 0 0 40%;
  border: 2px solid black;
}
.other {
  background: pink;
  flex: 1;
}
/* magic section */

.extend {
  position: relative;
}
.extend::after {
  content: '';
  position: absolute;
  width: 100vw;
  top: 0;
  height: 100%;
  background: inherit;
  z-index: -1;
}
.left::after {
  right: 0;
}
.right::after {
  left: 0;
}

<div class="wrapper">
  <header></header>
  <div class="inner">
    <main class="extend left"></main>
    <aside class="extend right"></aside>
  </div>
  <div class="other"></div>
</div>

【讨论】：

它对我有用。谢谢你的回答！这是一个很好的提示！