自主学習1-6「フレックスボックスを使ってみよう」

前回「自主学習1-5【補足】」からの続きで、今回はフレックスボックスについて学習します。

ゴミコ
レッスン1回目の内容で「ホームページのレイアウトはフレックスボックスを使おう」という課題があったよね。

フレックスボックスとは?

フレックスボックスを使うと何ができるの?

  • HTMLブロックを横並びにすることができる
  • floatよりも柔軟なレイアウトを組むことができる

フレックスボックスの基本概念

  • 主軸 (main axis) と交差軸 (cross axis) を利用してブロック要素を配置することができる。フレックスボックスを使った操作では常にこの軸について参照することになる。
  • フレックスボックスは文書の書字方向を仮定しない。書字方向は指定することができる。

フレックスボックスの基本概念

参考:MDN Web Docs mozilla
ゴミコ
文章だと分かりづらいので、実際にやってみよう。
前回使用したfloatは消去したよ。

フレックスボックスを作成する方法

フレックスコンテナーをつくろう
  • フレックスボックスとして配置したい箇所にCSSでdisplay:flex(もしくはdisplay:inline-flex)を設定することで、フレックスボックスのレイアウトモードを使用することができる。
  • フレックスボックスを使ってレイアウトされるドキュメント領域をフレックスコンテナーと呼ぶ。
point!! フレックスコンテナーは親要素

1.フレックスコンテナーを設定しよう

HTML内での記述 フレックスボックスとして配置したい箇所をdivタグで囲みます。
<div class="flexbox">
			<div class="newlist">
				<h2>新着情報</h2>
				<ul>
					<li>(黒丸)今日の朝ごはん</li>
					<li type="circle">(白丸)今日の昼ごはん</li>
					<li type="sqare">(四角)今日の夜ごはん</li>
				</ul>
			</div>

			<div class="author">
				<h2>気になるリスト</h2>
 				<ul>
					<li type="I">近所の猫ちゃん</li>
					<li type="I">明日の昼ごはん</li>
					<li type="I">明日のプログラミングレッスン</li>
 				</ul>
			</div>
		</div>
ゴミコ
親要素(クラス名flexbox)に内包されるリスト2つがフレックスアイテム(子要素)になるよ。
CSS内での記述 プロパティをdisplay、値をflexと記述し、ドキュメント領域をフレックスコンテナーに指定します。
.flexbox
{
	display: flex;
}
displayプロパティの値について

flex…ブロックレベルのフレックスコンテナボックスを生成する

inline-flex…インラインレベルのフレックスコンテナボックスを生成する

2.フレキシブルレイアウトを利用しよう

フレックスコンテナーで使用できるレイアウトをフレキシブルレイアウトと呼びます。

フレキシブルレイアウト モジュール(一部抜粋)
プロパティプロパティの説明
flex-directionフレックスアイテムをどの方向に並べていくか配置方向を指定・row…インライン要素の並ぶ方向が横(左→右)方向になる
・row-reverse…インライン要素の並ぶ方向が横(右←左)方向になる
・column…ブロック要素の並ぶ方向が縦(上↓下)方向になる
・column-reverse…ブロック要素の並ぶ方向が縦(下↑上)方向になる
flex-wrapフレックスアイテムを一行に並べるか複数行に並べるか折り返し方法を指定・nowrap…折り返しなし
・wrap…折り返す
・wrap-reverse…逆方向に折り返す(下↑上)
flex-flowフレックスアイテムの配置方向と折り返し方法をまとめて指定・各プロパティ(flex-directionとflex-wra)の値を半角スペース区切りで指定
orderフレックスアイテムの表示順序を指定・整数…整数値でフレックスアイテムの表示順序を指定
justify-content主軸に対してフレックスアイテム同士の間隔(横方向の揃え位置)を指定・flex-start…行頭寄せ
・flex-end…行末寄せ
・center…センター揃え
・space-between…アイテムの間にスペースを均等割り付け
・space-around…アイテムの両端にスペースを均等割り付け
align-items交差軸に対してフレックスアイテム同士の間隔(縦方向の揃え位置)を指定・normal…初期値
・stretch…伸縮して揃える
・center…センターに配置
・start…始端に配置
・end…終端に配置
・flex-start…フレックスコンテナ内の始端に配置
・flex-end…フレックスコンテナ内の終端に配置

フレキシブルレイアウト (Flexible Box Layout モジュール)

参考:HTMLクイックリファレンス
ゴミコ
フレキシブルレイアウトを利用すれば、アイテムをどう配置するのか?など見た目を指定できるよ。
フレキシブルレイアウトを指定
.flexbox
{
	display: flex;
	justify-content:center;
}
ゴミコ
フレックスアイテムを横方向に並べて、センターに寄せる指定を記述してみたよ。

以下がブラウザで表示させたものです。

参考1-6-1

以下はスマホバージョンで表示させたものです。(レスポンシブデザインにも対応)

参考1-6-2
ゴミコ
記述した通り、リスト2つが横並びでセンター寄せになっているわ。
フレキシブルレイアウトを理解すれば、オリジナルの(一般的な上から下への配置ではない)サイトを構築できるというわけね。

自主学習1-6について、講師の評価

フレックスボックスは「自分が思った通りになるかどうか?」を実際に手を動かしながら学習するとイメージが付きやすく理解が深まります。またワイヤフレームやデザインから思い通りのレイアウトをHTMLコードに書き起こす練習など、より実践的な学習にも挑戦してみましょう。

byゴミリョ

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村