04 ホームページ中級講座 display:flex のおさらい

2020年4月9日2025年4月13日

下記の講座で、ナビゲーションについてのコード練習を行ってきました。

今回は改めて、CSSのdisplayプロパティのflexについて、復習もかねて深く学習していきましょう

練習するためのHTMLファイルの準備

ファイルを作成し、以下のコードを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <header>
            <h1>Flex Box</h1>
        </header>
        <nav>
            <!--このulの箇所を横並びにします-->
            <ul>
                <li><a href="#">box1</a></li>
                <li><a href="#">box2</a></li>
                <li><a href="#">box3</a></li>
                <li><a href="#">box4</a></li>
                <li><a href="#">box5</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

header要素に指定

style.cssファイルを開いて、下記のコードを記述します。

*{
    margin: 0;
}
.content{
    width:600px;
    border:solid 1px #000;
    margin:20px auto;
}
header h1{
    text-align: center;
    background: #ddd;
}

ここまでのコードをプレビューすると下図となります。

display:flex

display: flexを使うことで、箇条書きの項目（box1からbox5）を横並びに配置できます。通常、ul要素内のli要素はブロック要素であるため、デフォルトでは縦方向に並びます。この縦並びを横並びに変更するには、親要素であるulに対してdisplay: flexを指定します。これにより、Flexboxのレイアウト機能が適用され、子要素が一列に整列します。

<nav>
  <ul>
      <li><a href="#">box1</a></li>
      <li><a href="#">box2</a></li>
      <li><a href="#">box3</a></li>
      <li><a href="#">box4</a></li>
      <li><a href="#">box5</a></li>
  </ul>
</nav>

ul{
    list-style: none;
    padding-left:0;
    display: flex;
}

ul要素は箇条書きのリスト要素のため、デフォルトでは黒い点（リストマーカー）が表示され、さらに左側に余白が設定されています。このスタイルをカスタマイズするために、以下の調整を行いました。

リストマーカーの削除
リストの黒点（マーカー）を消すために、list-style: none;を指定します。
左側の余白を削除
デフォルトで設定されている左内側余白（padding-left: 40pxなど）を削除するために、padding-left: 0;を指定します。
子要素を横並びにする
Flexboxレイアウトを適用するため、親要素であるulにdisplay: flex;を指定します。これにより、子要素のliが横一列に並びます。

display: flex;は、子要素を横並びにするだけのプロパティです。これにより、li要素同士の配置や幅、揃え方を細かく制御することはできません。そのため、レイアウトをさらに調整する場合は、追加のFlexboxプロパティを利用する必要があります。

justify-content:center

justify-content: center;は、CSSのflexboxレイアウトで使用されるプロパティで、親要素内の子要素を水平方向（横方向）に中央揃えにします。これを使うと、例えば、横並びの<li>要素が親要素（<ul>など）の中央に揃えられます。

ul{
    list-style: none;
    padding-left:0;
    display: flex;
    justify-content: center
}

justify-content:space-between

justify-content: space-between;は、CSSのflexboxレイアウトで使用されるプロパティで、親要素内の子要素を水平方向（横方向）に配置する際、子要素同士の間隔を均等に広げます。両端の子要素は親要素の端に揃えられます。

例えば、横並びの<li>要素が親要素（<ul>など）の中で等間隔に配置されます。

ul{
    list-style: none;
    padding-left:0;
    display: flex;
    justify-content: space-between
}

justify-content:space-around

justify-content: space-around;は、CSSのflexboxレイアウトで使用されるプロパティで、親要素内の子要素を水平方向（横方向）に配置する際、子要素の周囲に均等な余白を作る配置方法です。
各子要素の両側に均等なスペースが確保されるため、親要素の両端にも少し余白が残ります。

ul{
    list-style: none;
    padding-left:0;
    display: flex;
    justify-content: space-around
}

justify-content: space-aroundだと、区切り幅と背景色がない場合は問題ありませんが、中の子要素であるli要素に区切り線と背景色を設定してみると下記のようになってしまいます。

nav ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: space-around
}
nav ul li {
    border-right: 1px solid #000;
    text-align: center;
    background: #ff0;
    padding: 10px 0;
}
nav ul li a {
    color: #f00;
    text-decoration: none;
    display: block;
}

`justify-content`のその他の値

flex-start
- 子要素をコンテナの左端（または主軸の開始位置）に揃えます。
- デフォルト値で、特に指定しない場合にこの動作が適用されます。
flex-end
- 子要素をコンテナの右端（または主軸の終了位置）に揃えます。
space-evenly
- 子要素間の間隔が均等になるように配置します。さらに、最初と最後の要素とコンテナの端との間隔も均等になります。
stretch(一部の環境では非推奨)
- 主軸方向で子要素を伸縮させ、利用可能なスペースを埋めます。多くの場合、指定された幅または高さを持たない場合に適用されます。
inherit
- 親要素のjustify-contentの値を継承します。
initial
- プロパティを初期値（flex-start）にリセットします。
unset
- 継承可能な場合は親の値を継承し、そうでない場合は初期値（flex-start）になります。

flexプロパティ

flexプロパティは、CSSのflexboxレイアウトで使用されるプロパティで、親要素内の子要素（<li>など）の幅を柔軟に調整するために使われます。具体的には、子要素の比率や配置方法を簡単に設定できます。

`flex`プロパティで柔軟に調整

flexプロパティを使用すると、子要素の幅が自動的に調整され、均等に配置されます。

ul li {
    flex: 1; /* 各要素の幅を均等に分配 */
}

flexプロパティの基本構造

1. 成長率（flex-grow）

子要素が親要素の余白をどの程度埋めるかを指定します。
例: flex: 1;
- 各要素が均等に余白を分配します。

2. 縮小率（flex-shrink）

親要素が小さくなった場合、子要素がどの程度縮小されるかを指定します。

3. 基準サイズ（flex-basis）

子要素の初期サイズを指定します（autoがデフォルト）。

完成イメージ

全体のCSSコード

* {
    margin: 0;
}
.content {
    width: 600px;
    border: solid 1px #000;
    margin: 20px auto;
}
header h1 {
    text-align: center;
    background: #ddd;
}
nav ul {
    list-style: none;
    padding-left: 0;
    display: flex;
}
nav ul li {
    flex: 1;
    border-right: 1px solid #000;
    text-align: center;
    background: #ff0;
}
nav ul li:last-child {
    border-right: none;
}
nav ul li a {
    padding: 10px 0;
    color: #f00;
    text-decoration: none;
    display: block;
}
nav ul li a:hover {
    background: #000;
    color: #fff;
}