Flexboxレイアウト・アイテム配置方法に関係するプロパティを知ろう

今回のお題

クライアント

ナビゲーションの左側にロゴを入れたい！
メニューの文字は右側に寄せて配置してください。

• 1.完成イメージと下準備
• index.htmlでロゴを挿入する
• ロゴとメニュー(ul)を横並びにする
• 2.フレックスアイテムの揃え方を決める
• justify-contentで主軸方向(横方向)の揃え方を決める
• align-itemsで交差軸方向(縦方向)の揃え方を決める
• 3.フレックスアイテムの並び方を指定する
• アイテムの並び順を決めるflex-direction
• アイテムを折り返すか決めるflex-wrap
• アイテムに指定するCSSプロパティもある
• 実習
• 設定例①flex-directionを使う
• 設定例②flex-wrapを使う

1.完成イメージと下準備

今回のお題では、下図のようにナビゲーション部分を作り変えます。

【各要素の配置イメージ】

index.htmlでロゴを挿入する

ナビゲーションの左側に表示するロゴを表示させましょう。
<nav>タグのすぐ下に、imgタグを追加します。

index.html

<nav>
    <img src="images/edbase_logo.png" alt="エドベース株式会社ロゴ">
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">会社概要</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

ブラウザで表示すると、ロゴの画像が異常に大きく表示されてしまいます。

これはedbase_logo.pngが、元々サイズが大きな画像のためです。
CSSで表示させたい横幅と高さを指定して、ちょうどよく見えるようにしましょう。

style.css

nav img{
  width: 45px;
  height: 45px;
}

ロゴとメニュー(ul)を横並びにする

CSSでdisplay:flexを使って、追加したロゴとulが横並びになるようにします。
すでにあるnav { }内に追加しましょう。

style.css

nav{
  display: flex; /* 今回追加する箇所 */
  padding: 0.5rem;
  background: rgb(58, 110, 188);
}

横には並びました。
ここから、Flexboxのプロパティを使って配置・揃え位置を指定していきます。

2.フレックスアイテムの揃え方を決める

Flexboxレイアウトではフレックスコンテナ（親要素）の中で、フレックスアイテム（子要素）をどのように配置するかを指示できるプロパティが用意されています。

それを使って、クライアントの要望通りのレイアウトを作っていきましょう。

justify-contentで主軸方向(横方向)の揃え方を決める

フレックスコンテナ内で主軸方向(横方向)にスペースがあった場合、justify-contentプロパティを使うと、中身をどの様に配置するかを指定するすることが出来ます。

◆justify-contentの値

justify-contentプロパティの値で、よく使うのは以下の6つです。

◆justify-contentの値解説

右揃え、左揃えなどはわかりやすいですが、space-aroundなどは上記の説明だけではピンと来ないのではないでしょうか。

検証ツールで見てみましょう。
nav要素を選択してみると、余っているスペースがあります。

stylesパネルのnav { }に justify-contentプロパティを入力してみましょう。

justify-contentと打ち込んで確定すると、設定可能なプロパティ値が候補として出てきます。上下キーで値を切り替えていくと、ロゴとulの位置が変わります。

下図はnav要素にStylesパネルでjustify-content: space-aroundを適用させ、もう一度navタグを選択した時の表示です。

余っているスペースが分散していることが分かります。
これが“各アイテムを均等に配置し、各アイテムの両側に半分の大きさの間隔を置く”状態です。

CSSのjustify-contentプロパティで、上表の値を適用した際の表示をまとめると下図になります。

※白い点線はスペース

今回の場合は右端、左端を揃えたいのでspace-betweenを設定します。

style.css

nav{
  display: flex;
  justify-content: space-between; /* 今回追加する箇所 */
  padding: 0.5rem;
  background: rgb(58, 110, 188);
}

align-itemsで交差軸方向(縦方向)の揃え方を決める

現在のナビゲーションは、ロゴと文字の縦方向の位置がズレています。
ちょっと表示に違和感がありますよね。

例えば、下図のように中心に揃えると、安定感が出るのではないでしょうか。

このように、フレックスアイテムの高さが違う場面で、CSSのalign-itemsプロパティを設定すると、交差軸方向(縦方向)の揃え位置を決めることができます。

◆ align-itemsの値

align-itemsプロパティの値として、よく使うのは以下の5つです。

今回の場合は縦方向中央に揃えたいので、align-items: center; を使います。

style.css

nav{
  display: flex;
  justify-content: space-between;
  align-items: center; /* 今回追加する箇所 */
  padding: 0.5rem;
  background: rgb(58, 110, 188);
}

◆align-itemsの値解説

align-itemsの値のうち、start, end, centerは言葉とおりの並び順です。
ちょっと想像しにくいのが、stretch(初期値)とbaselineではないでしょうか。

align-items: baseline; はフレックスアイテムではなく、フレックスアイテムの中にある文字のベースラインを揃える形で配置します。

align-items: stretch; はフレックスコンテナの高さに合わせて、フレックスアイテムを伸縮します。フレックスコンテナの高さ指定がない場合は、基本的に最も高さが大きいフレックスアイテムに合わせる形で、他アイテムの高さが引き伸ばされます。

ただし、フレックスアイテムに高さを指定している場合、伸縮されません。
今回のコーディングではimgにheight指定を加えているため、縦方向では何揃えにもなっていないような見え方をしています。

3.フレックスアイテムの並び方を指定する

Flexboxレイアウトでよく使うCSSプロパティとしては、揃え位置・配置以外に、アイテムの並べ方を決めるものもあります。

アイテムの並び順を決めるflex-direction

CSSのflex-directionプロパティは、子要素（フレックスアイテム）をどのような向きで配置していくかを指定します。フレックスコンテナの要素に指定します。

CSSの書き方入門講座では、スマホ幅で表示した時にメインカラムとサイドバーを縦並べに変更するのに使いました。

◆flex-directionの値

並べ方の指定は、フレックスコンテナもしくはその親要素の書字方向に準じるので、定義がややわかりにくくなっています。
一般的なWebページの場合は下記のようにを覚えておけば大丈夫です。

アイテムを折り返すか決めるflex-wrap

表示するブラウザ幅やフレックスアイテムのサイズ・数によって、見にくくなったり、はみ出してしまうことがあります。

例えば、今回作ったindex.htmlの<nav>部分は、幅320pxで表示すると下図のようになります。liタグで囲った文字がそれぞれ自動改行されていて、見にくいです。

こんな時に役立つのが、flex-wrapプロパティ。
flex-wrapプロパティでは、フレックスアイテムがフレックスコンテナに収まらない場合にどう扱うかを指定することができます。

◆flex-wrapの値

アイテムに指定するCSSプロパティもある

今回学習したjustify-content、align-items、flex-direction、flex-wrapの４つは、全てフレックスコンテナに指定するCSSプロパティでした。

Flexboxでは、子要素側に設定するCSSプロパティもあります。
main要素に指定した、フレックスアイテムが占める比率を設定するflex: 3;などが代表的です。よく使うのは下記3つです。

• アイテムの大きさ、伸長収縮率を決める：flexプロパティ（flex-grow、flex-shrink、flex-basisの一括指定）
• アイテムの並び順を変える：orderプロパティ
• 縦方向の揃え位置を設定する：align-selfプロパティ

実習

実習では、スマホ幅でのレイアウトを調整してみましょう。
幅320pxで表示した際、下図のようにナビゲーション部分が表示されるようにします。

CSSはstyle.cssの@media (max-width:767px) { }内に記述してください。
liタグにはmargin-rightが指定されているので、そこも調整するとより綺麗になります。

設定例①flex-directionを使う

• フレックスアイテムの並びを縦方向に設定
• フレックスアイテムの配置を、横方向の中央揃えに設定

style.css

/* @media (max-width:767px) {}内に記述 */
nav{
    flex-direction: column;
    justify-content: center;
}

nav li{
    margin: 0 0.5rem;
}

767px以下の幅で表示したときには、ロゴとメニューが上下に配置されます。

設定例②flex-wrapを使う

• フレックスアイテムの配置を、横方向の中央揃えに設定
• flex-wrapを使って、横幅が狭いときは折り返すように指定

style.css

/* @media (max-width:767px) {}内に記述 */
nav{
    justify-content: center;
    flex-wrap: wrap;
}

nav li{
    margin: 0 0.5rem;
}

幅320pxで見た時は、方法①と同じ見え方をします。
違いは、flex-wrapによる折返しで上下配置になっているという点。
フレックスコンテナがロゴとメニューを横並びにできる幅がある場合は、横並びで表示されます。