私は以下のワイヤフレームを持っており、これをコード化する最良の方法がflexboxであることを確認したいと考えています。フレックスボックスでレイアウトを設定する
私はsimple flexbox grid systemをコード化しましたが、私のワイヤフレームは私のグリッドシステム上のものより多くのカスタマイズが必要です。
私は親のdivがdisplay: flexを持っており、2つのdivがflex:1とflex: 0 0 40%を持っています。 残りのメインラッパー（灰色のボックス全体をmax-width: 1400pxに設定）に残りますコンテンツdiv（青と赤の灰色のボックスの内側）を追加する最も良い方法は何ですか？
ありがとうございます。
ここに一般的な考えがあります。
配置された擬似要素。行の各セクションに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>それは私のために働く。答えてくれてありがとう！これは素晴らしいヒントです！ – Ohsik
重複 - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen –
@Paulie_Dはい、背景画像と色があります。それはまったく異なる質問です（レイアウト）。もう1つは 'flexbox'を使用していません。 – Ohsik
これは重複しているか意見に基づいており、閉鎖される可能性があります。質問の "最良の方法"の部分を削除して、あなたが実際に持っている問題に立ち向かうことが、より肯定的な注意を喚起する可能性がある場合。それでも、私はそれがQ＆Aと重複していると思います。 –