用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設置佈局

回答

相關問題