order
「order」プロパティは、display: flexを指定している親要素に配置される子の順番をコントロールします。
order: 1;
order: 2;
order: 3;
www.webcreatorbox.com
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html
今までfloatやpositionを多用しなければ出来なかった様なレイアウトが少ないコードで簡単に組めるので、ぜひ色々なレイアウトを実際に組んでみましょう。
実際に「order」プロパティを使って3カラムレイアウトを組んでみましょう。
<body>
<nav>
<ul class="main-nav">
<li><a href="#" class="logo">Logo</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="main">
<section class="col-1">
<h1>Column 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo. Sed ex leo, porttitor sit amet lectus et, pretium eleifend ipsum.</p>
</section>
<section class="col-2">
<h1>Column 2</h1>
<p>Morbi non semper sapien. Suspendisse elementum interdum metus, in volutpat lectus consectetur id. Praesent vulputate ipsum eget lectus tempus tempus. Nullam ut lobortis risus, eu tempor tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p>Integer vel pellentesque elit. Sed faucibus magna vitae metus ornare, ut pulvinar leo blandit. Mauris tincidunt ante nec quam maximus iaculis ut id lorem. Integer nec ligula faucibus, sollicitudin elit at, maximus tortor.</p>
</section>
<section class="col-3">
<h1>Column 3</h1>
<p>Integer commodo, risus vel viverra bibendum, massa massa consectetur felis.</p>
</section>
</div>
</body>
スタイルシート
"utf-8";
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}
.main-nav, .main {
display: flex;
}
.main-nav li:first-child {
margin-right: auto;
}
.main-nav a {
margin: 10px;
border-radius: 5px;
background: #60B99A;
color: #fff;
display: block;
padding: 15px;
}
.main-nav .logo {
background: #4584b1;
}
.main section {
flex: 1;
margin: 10px;
border-radius: 5px;
background: #F5F0CF;
padding: 15px;
}
.main .col-2 {
flex: 2;
}
.main h1 {
color: #E6AC27;
}
.main p {
margin-top: 10px;
font-size: 18px;
}
screen and (max-width: 767px) {
.main {
flex-direction: column;
}
}
