用flexbox设置布局

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

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

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

谢谢。

来源

2016-08-12 Ohsik

复制 - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen –

@Paulie_D是的，会有背景图像和颜色。这是完全不同的问题（布局），另一个甚至不使用'flexbox' – Ohsik

目前这是一个重复或基于意见，可能会被关闭。如果您可以删除问题的“最佳方式”部分并回答您遇到的实际问题，可能会得到更多的积极关注。即使如此，我认为这是我连接的问答的重复。 –

这是一般的想法。

定位的伪元素，每行的一个部分。用合适的宽度（注意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>

来源

2016-08-12 19:17:57

它适合我。谢谢你的回答！这是一个很棒的提示！ – Ohsik

用flexbox设置布局

回答

相关问题