CSS3：flexbox - Webデザインのこと、いろいろ

CSSを一行プラスするだけで横並びにできる
横並びになった要素の高さが最初から揃ってる
要素を上下左右、好きな順序に並び替えられる
高さの異なる横並びの要素を、簡単に上下中央揃えにできる

ナビゲーション版
Flexboxを使ったナビゲーション：完成版にリンク
これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス：参考サイト

f:id:sankoblog:20160718154210p:plain
　　　　　　↓
f:id:sankoblog:20160718154220p:plain

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったナビゲーション</title>[f:id:sankoblog:20160718154210p:plain][f:id:sankoblog:20160718154220p:plain]
<style>
ul { list-style: none; }
a { text-decoration: none; }

.mainNav {
  display: flex;
}
.mainNav li {
  width: 160px;
  line-height: 50px;
  text-align: center;
}
.mainNav a {
  margin: 1px;
  background: #60B99A;
  color: #FFF;
  display: block;
}
</style>
</head>
<body>
<nav>
<ul class="mainNav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</nav>
</body>
</html>

div版
Flexboxを使ったレスポンシブWebデザイン：完成版にリンク

f:id:sankoblog:20160707224522p:plain
f:id:sankoblog:20160707224530p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったレスポンシブWebデザイン</title>
<style>
#container {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.box {
  text-align: center;
  line-height: 100px;
}
.box1, .box5 {
  width: 100%;
  height: 100px;
  background: #FBE4EE;
  border: 4px solid #EA6094;
  box-sizing: border-box; 
}
.wrapA {
  display: flex; 
  height: 300px;
  box-sizing: border-box;
}
.wrapA > .box2 {
  order: 2;
  flex-grow: 3;
  background: #FFFBCB;
  border: 4px solid #FFE500;
}
.wrapA > .box3 {
  order: 1;
  flex-grow: 1;
  background: #EDF7FD;
  border: 4px solid #4188C9;
}
.wrapA > .box4 {
  order: 3;
  flex-grow: 1;
  background: #F3F7E0;
  border: 4px solid #B5D22F;
}

@media screen and (max-width:797px){
  .wrapA {
    display: block;
    height: auto;
  }
  .wrapA>.box {
    /*  文書順に戻す  */
    order: 0; 
    width: auto;
    height: 100px;
  }
}
</style>
</head>
<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.wrapA -->
<div class="box box5">BOX5</div>
</div><!-- /#container -->
</body>
</html>