個人練習用flex3カラム

(<div class="flexbox"><section class="list">)

<div class="flexbox"><section class="list">

(<h1>Contents</h1><ul><li>Story</li><li>About</li>)

<h1>Contents</h1><ul><li>Story</li><li>About</li>

(<li>Contact</li></ul></section><article class="main">)

<li>Contact</li></ul></section><article class="main">

(<h1>The Little Prince</h1>)

<h1>The Little Prince</h1>

(<p>And he went back to meet the fox.</p>)

<p>And he went back to meet the fox.</p>

(</article><section class="side"><h1>About</h1>)

</article><section class="side"><h1>About</h1>

(<p>The Little Prince (French: Le Petit Prince))

<p>The Little Prince (French: Le Petit Prince)

(</p></section></div>Resources</body></html>)

</p></section></div>Resources</body></html>

(css)

css

(.main {background: #fcc;)

.main {background: #fcc;

(margin: 10px 0;})

margin: 10px 0;}

(.side {background: #fea;})

.side {background: #fea;}

(.list {background: #afd;})

.list {background: #afd;}

(.main,.side,.list {padding: 2%;)

.main,.side,.list {padding: 2%;

(border-radius: 10px})

border-radius: 10px}

(@media ( min-width : 600px ){)

@media ( min-width : 600px ){

(.flexbox {display: -webkit-flex;)

.flexbox {display: -webkit-flex;

(display: flex; })

display: flex; }

(.main {margin: 0 10px;)

.main {margin: 0 10px;

(-webkit-flex: 2; flex: 2;})

-webkit-flex: 2; flex: 2;}