目次
「display:flex」はどのようなコード？
今回説明していくのはcssで使う「display:flex」というコード。これは一体どのようなコードなのかをまず説明します。
「display:flex」は「display」プロパティの値の1つであり、「display:flex」を適応した要素はflexboxとして扱われます。（flexboxの中の要素はflexitemです）
「flexboxになる」という考え方が重要で、要は「要素を入れる箱」。もっと言えば「要素を整列させる箱」として使用していくことになります。
では実際に使い方を説明していきます。
「display:flex」でできること
ここから「display:flex」の具体的な使い方を説明していきます。
「display:flex」を使って要素を横並びにしたい
要素を横並びにする方法です。基本的にこの機能を使うために「display:flex」を使うことになります。ひとまずコードをコピペして使いながら覚えていきましょう。
STEP1_html記述
まずhtmlを書き込みます。以下のコードをコピーしてまっさらなindex.htmlにペーストしてください。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<title>サイトタイトル | デモページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="flex-box">
<li class="flex-item">
<li class="flex-item">
<li class="flex-item">
</ul>
</body>
</html>今回はulタグの「flex-box」の直下にあるli要素の「flex-item」を横並びにします。
STEP2_css記述
次にcssもコピーしてstyle.cssにペーストしてください。
.flex-box{
display:flex;
}
.flex-item{
list-style: none;
width:50px;
height:50px;
border:1px solid #000;
}以上です。これでhtmlファイルを開いてみてください。
See the Pen css2_1 by 近野智優 (@bplqliga-the-bashful) on CodePen.
これと同じ表示になっていれば問題なく適応されています。
「display:flex」がない場合の表示と見比べてみたら一目瞭然ですが、ただ横並びになっただけです。ただ横並びにしたいだけならこれで問題はないのですが、実際に運用していくとなるとそうともいきません。実際はさらにflexboxをカスタマイズする必要性が出てくるので今回はそれらも紹介したいと思います。
「display:flex」の要素に間隔をつけたい
先ほど実装したhtmlファイルを開いていただければ分かるように、要素がピッタリとくっついてしまっています。その場合当然間隔を空けたいという状況も生まれるでしょう。
display:flexの要素間に間隔を作りたい場合は以下のコードをcssの「flex-box」のクラスに追加してください。
gap:10px;そうすると以下のような表示になると思います。
See the Pen css2_3 by 近野智優 (@bplqliga-the-bashful) on CodePen.
とても簡単ですね。この間隔を変更したい場合は「10px」の部分を調節してください。
「display:flex」の要素を中央揃えにしたい（横軸）
「display:flex」の要素を中央揃えにする方法ですね。これはかなり使います。というか基本的に使います。なので必ずセットで覚えるようにしましょう。
ではなぜ中央揃えが必要なのでしょうか。
中央揃えが必要なのはこのような状態です。先ほどdisplay:flexをコピペで実装した時には要素が全て同じサイズだったので特に問題はありませんでしたが、実際にサイトを作っているとそうとは限りません。そしてこれらの要素を中央に揃えたい。という状況が生まれます。
display:flexの要素を中央揃えにしたい場合は以下のコードをcssの「flex-box」のクラスに追加してください。
align-items: center;そうすると以下のように横並びの要素が中央揃えになります。
See the Pen css2_3 by 近野智優 (@bplqliga-the-bashful) on CodePen.
これはかなりよく使うので必ずセットで覚えておきましょう。また「align-items」の主要な値は以下の通りです。
.flex-box {
display: flex;
/* align-items */
align-items: center; /* アイテムを中央付近にまとめる */
align-items: start; /* アイテムを先頭にまとめる */
align-items: end; /* アイテムを末尾にまとめる */
align-items: flex-start; /* フレックスアイテムを先頭にまとめる */
align-items: flex-end; /* フレックスアイテムを末尾にまとめる */
}「display:flex」の要素を中央に寄せたい（縦軸）
先ほどはflexitemを横軸で中央揃えにする方法を説明しましたが、今回は縦軸に中央に寄せる方法です。また中央に寄せるだけではなく色々な配置方法が選択できますのでこちらに関しても使用頻度は高いです。必ず覚えましょう。
そして縦軸の中央揃えが必要なのはこのような状況です。
display:flexの要素を縦軸に中央揃えにしたい場合は以下のコードをcssの「flex-box」のクラスに追加してください。
justify-content: center;そうすると以下のように横並びの要素が中央揃えになります。
See the Pen css2_2 by 近野智優 (@bplqliga-the-bashful) on CodePen.
このコードも正直めちゃくちゃ使うので絶対に覚えておきましょう。また「justify-content」の主要な値は以下の通りです。
.flex-box {
display: flex;
/* justify-content */
justify-content: center; /* アイテムを中央に寄せる */
justify-content: start; /* アイテムを先頭に寄せる */
justify-content: end; /* アイテムを末尾に寄せる */
justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
justify-content: flex-end; /* フレックスアイテムを末尾に寄せる */
justify-content: left; /* アイテムを左端に寄せる */
justify-content: right; /* アイテムを右端に寄せる */
}「display:flex」で要素を折り返したい
「display:flex」は要素を横並びにできますが、それだけでは要素を折り返して複数列にすることはできません。なので要素の折り返しを実装したい場合はまた一工夫加える必要があります。
そして要素の折り返しが必要なのはこのような状況です。
display:flexの要素を折り返して複数列にしたい場合は以下のコードをcssの「flex-box」のクラスに追加してください。
flex-wrap:wrap;そうすると以下のように横並びの要素が折り返され、複数列になります。
See the Pen css2_4 by 近野智優 (@bplqliga-the-bashful) on CodePen.
このコードも割と使うことがあるので覚えておいた方がいいです。
「display:flex」を縦方向に使いたい
「display:flex」といえば横並びにするコードという認識が強いかもしれませんが、実は縦並びにしても使うことが多いです。それはなぜかというと「display:flexが配置系のコードの中で超万能だから」です。
縦方向でdisplay:flexの機能を使いたい場合や、縦方向で複数要素の配置を管理したい場合などには「display:flexにして縦方向にする」という技を使うことになると思います。これも結構使うので必ず覚えておきましょう。
display:flexを縦方向に使いたい場合は以下のコードをcssの「flex-box」のクラスに追加してください。
flex-direction: column;そうすると以下のようにdisplay:flexの要素が縦方向になります。
See the Pen css2_6 by 近野智優 (@bplqliga-the-bashful) on CodePen.
また「justify-content」の主要な値は以下の通りです。
.flex-box {
display: flex;
/* flex-direction */
flex-direction: row; /* 横方向に配置（初期値） */
flex-direction: row-reverse; /* rowの逆向き */
flex-direction: column; /* 縦方向に配置 */
flex-direction: column-reverse;/* columnの逆向き */
}ちなみにデモだと「align-items: center」がついていますが「flex-direction:column」をあてると「justify-content: center」と「align-items: center」の効果が逆になります。なので今回のデモでは「align-items: center」の効果が縦向きではなく横向きの中央揃えになっています。ここら辺は少しややこしいですがやっていくうちに理解していくと思いますので少しずつ習得していきましょう。
今回はcss超万能コード「display:flex」について説明しました。ぜひ他の記事も参考にしていただき最速でweb制作をマスターしていただけたらと思います！
