如何使用Flex容器CSS屬性我創建這個佈局

代碼：如何使用Flex容器CSS屬性我創建這個佈局

<!DOCTYPE html> 
<html> 
    <head> 
     <style> body{margin: 0px;} body> div { display: flex; flex-flow: row wrap; } body>div>nav,header,main,main,main { border-radius: 3px;margin: 5px;padding: 10px; } body>div>nav {order:2;height:100px;flex:0 1 80%;} body>div>header{order:1;flex: 200px;} body>div>main{order:3;align:right;min-height:400px;flex:1;} body>div>main{order:4;flex: 0 1 200px;} </style> 
    </head> 
    <body> 
     <div> 
     <nav>ex it</nav> 
     <header>flexem</header> 
     <main>hshsad</main> 
     <main>hsgdhsgd </main> 
     </header> 
    </body> 
</html>

請幫幫忙，我是新來的HTML和CSS提前

謝謝

來源

2017-02-15 Arch8

請提供你的代碼。 –

請通過編輯問題而不是評論來提供問題本身的代碼。 –

我已經做到了這一點，但仍然沒有工作將請任何人提供整個代碼我試圖從6天這需要真正的幫助btw我是新手，現在我想與顯示：表屬性 – Arch8

這裏是一個例子。
Flexbox屬性並不像它們看起來那麼神奇，最好在內設置Flexbox容器作爲您的第一個。

/* Your 1st level container */ #container { width: 100%; height: auto; display: flex; flex-flow: row wrap; justify-content: space-between; } /* Just setting borders */ #container aside, #container main section, #container main div { border: 5px solid black; box-sizing: border-box; } aside { width: 25%; height: 600px; } /* This is the 2nd flexbox container */ main { width: 75%; height: auto; display: flex; flex-flow: row wrap; justify-content: space-around; } main section { width: 95%; height: 275px; } #container main div { width: 30%; height: 275px; }

<div id="container"> <aside></aside> <main> <section></section> <div></div> <div></div> <div></div> </main> </div>

來源

2017-02-15 09:40:11 AymDev

是的，它工作正常，但我在「顯示錶」屬性的幫助下創建這個？ – Arch8

@ArchanGhatpande我不確定你的意思。我使用了'display：flex'和其他flexbox屬性（'flex-flow'，'justify-content'）。 'display：table'會讓你的區塊像'

'一樣行事。請參閱[MDN - 顯示]（https://developer.mozilla.org/en-US/docs/Web/CSS/display）和[MDN - 使用CSS靈活框]（https://developer.mozilla.org/en -US /文檔/網絡/ CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes） – AymDev

相關問題

如何使用Flex容器CSS屬性我創建這個佈局

回答

相關問題