Flexbox を使ってみよう

Flexbox を使ってみよう === # 第21回 WordPress 勉強会@松戸これは [第21回 WordPress 勉強会@松戸](https://wpmatsudo.doorkeeper.jp/events/39167) で使用した資料です。 ## Flexboxとは Flexible Box Layout Module CSS3のレイアウトモジュールで、今までより少ないコードでより柔軟なレイアウトを表現できる。 ## ブラウザ対応状況 ![](https://i.imgur.com/Vg0nCKe.png) > 参考） > http://caniuse.com/#search=Flexbox ## 使ってみよう ### 手順① index.htmlを用意する [index.html] ```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> ul { list-style:none; } ul,li { mrgin: 0; padding: 0; } </style> <nav> <ul class="main-nav sample-1"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> ### 手順② 解りやすいように色をつける [style.css] <pre> .main-nav a { margin: 10px; padding: 16px; border-radius: 5px; background: green; color: #fff; display: block; text-decoration: none; } .main-nav .title { background: blue; } </pre> <style> .main-nav.color a { margin: 10px; padding: 16px; border-radius: 5px; background: green; color: #fff; display: block; text-decoration: none; } .main-nav.color .title { background: blue; } </style> <nav> <ul class="main-nav color"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> ### 手順③ Flexboxを適用する [style.css] <pre> .main-nav { display: flex; } </pre> <style> .main-nav.flex { display: flex; } </style> <nav> <ul class="main-nav color flex"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> ### 手順④ いろいろ変えてみる [style.css] <pre> //等間隔に横並び .main-nav { justify-content: space-between; } </pre> <style> .main-nav.sample-4-1 { justify-content: space-between; } </style> <nav> <ul class="main-nav color flex sample-4-1"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> <pre> //中央寄せ .main-nav { justify-content: center; } </pre> <style> .main-nav.sample-4-2 { display: flex; justify-content: center; } </style> <nav> <ul class="main-nav color flex sample-4-2"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> <pre> //右寄せ .main-nav { justify-content: flex-end; } </pre> <style> .main-nav.sample-4-3 { justify-content: flex-end; } </style> <nav> <ul class="main-nav color flex sample-4-3"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> <pre> //タイトルだけ左端に .main-nav li:first-child { margin-right: auto; } </pre> <style> .main-nav.sample-4-4 li:first-child { margin-right: auto; } </style> <nav> <ul class="main-nav color flex sample-4-4"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> <pre> //垂直方向をセンタリング .main-nav { align-items: center; } //垂直方向を下揃え .main-nav { align-items: flex-end; } </pre> 指定前 <nav> <ul class="main-nav color flex sample-4-5"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">２行の<br/>メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> - align-items: center; <style> .main-nav.sample-4-5-1 { display: flex; align-items: center; } </style> <nav> <ul class="main-nav color flex sample-4-5-1"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">２行の<br/>メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> - align-items: flex-end; <style> .main-nav.sample-4-5-2 { display: flex; align-items: flex-end; } </style> <nav> <ul class="main-nav color flex sample-4-5-2"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">２行の<br/>メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> <pre> //横幅を合わせる .main-nav li{ flex-basis: <font style="color:red">150px</font>; //横幅(width)を指定 } //伸びる倍率（均等幅で余白を埋める） .main-nav li{ flex-grow: 1; } </pre> **指定前** <nav> <ul class="main-nav color flex sample-4-6"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">menu2</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> **指定後** - flex-basis: 150px; <style> .main-nav.sample-4-6-1 li{ flex-basis: 150px; } </style> <nav> <ul class="main-nav color flex sample-4-6-1"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">menu2</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> - flex-basis: 150px; - flex-grow: 1; <style> .main-nav.sample-4-6-2 li{ flex-basis: 150px; flex-grow: 1; } </style> <nav> <ul class="main-nav color flex sample-4-6-2"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">menu2</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav> <pre> //最初を2倍に .main-nav li:first-child{ flex-grow: 2; } </pre> <style> .main-nav.sample-4-6-3{ flex-basis: 150px; flex-grow: 1; } .main-nav.sample-4-6-3 li:first-child{ flex-grow: 2; } </style> <nav> <ul class="main-nav color flex sample-4-6-3"> <li><a href="#" class="title">タイトル</a></li> <li><a href="#">メニュー１</a></li> <li><a href="#">menu2</a></li> <li><a href="#">メニュー３</a></li> </ul> </nav>