Flexbox を使ってみよう

第21回 WordPress 勉強会@松戸

これは第21回 WordPress 勉強会@松戸で使用した資料です。

Flexboxとは

Flexible Box Layout Module
CSS3のレイアウトモジュールで、今までより少ないコードでより柔軟なレイアウトを表現できる。

ブラウザ対応状況

参考）
http://caniuse.com/#search=Flexbox

使ってみよう

手順① index.htmlを用意する

[index.html]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WP勉強会@松戸</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul class="main-nav">
      <li><a href="#" class="title">タイトル</a></li>
      <li><a href="#">メニュー１</a></li>
      <li><a href="#">メニュー２</a></li>
      <li><a href="#">メニュー３</a></li>
      <li><a href="#">メニュー４</a></li>
    </ul>
  </nav>
</body>
</html>

手順② 解りやすいように色をつける

[style.css]

.main-nav a {
  margin: 10px;
  padding: 16px;
  border-radius: 5px;
  background: green;
  color: #fff;
  display: block;
  text-decoration: none;
}
.main-nav .title {
  background: blue;
}

手順③ Flexboxを適用する

[style.css]

.main-nav {
  display: flex;
}

手順④ いろいろ変えてみる

[style.css]

//等間隔に横並び
.main-nav {
  justify-content: space-between;
}

//中央寄せ
.main-nav {
  justify-content: center;  
}

//右寄せ
.main-nav {
  justify-content: flex-end;
}

//タイトルだけ左端に
.main-nav li:first-child {
  margin-right: auto;
}

//垂直方向をセンタリング
.main-nav {
  align-items: center;
}
//垂直方向を下揃え
.main-nav {
  align-items: flex-end;
}

指定前

align-items: center;

align-items: flex-end;

//横幅を合わせる
.main-nav li{
flex-basis: 150px; //横幅(width)を指定
}
//伸びる倍率（均等幅で余白を埋める）
.main-nav li{
  flex-grow: 1;
}

指定前

指定後

flex-basis: 150px;

flex-basis: 150px;
flex-grow: 1;

//最初を2倍に
.main-nav li:first-child{
  flex-grow: 2;
}