は、どのように私はフレックスコンテナのCSSプロパティを使用して、このレイアウトを作成することができます

コード：は、どのように私はフレックスコンテナの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

例を示します。
フレックスボックスのプロパティは見た目ほど魔法的ではありません。の内側にのフレックスボックスコンテナを設定する方が良いかもしれません。

/* 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 - display]（https://developer.mozilla.org/en-US/docs/Web/CSS/display）と[MDN - CSSフレキシブルボックスの使用]（https://developer.mozilla.org/en）を参照してください。 -US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes） – AymDev

は、どのように私はフレックスコンテナのCSSプロパティを使用して、このレイアウトを作成することができます

答えて

関連する問題