背景画像
BLOG

ブログについて

flexboxとfloatのちがい 1

2021.06.01

制作
技術

サムネ画像

こんにちは、今回の制作ブログは2回に渡って、コーディングを学び始めた人が割と初めに出会う「flexboxとfloatの違い」に関しての記事を書こうと思います。
まず今回の記事では「flexbox」に関して、軽く自分用のまとめ記事になる予感がしていますがお付き合いください...!

flexboxとは

flexboxとはCSS3から追加された比較的新しい機能で、要素の「配置」を短いコードで柔軟に行えるレイアウトモードのことです。古いブラウザなどには対応していませんが、現行ブラウザはほぼ全てに対応しています。

flexboxは以下のような構造が基本になり、flexプロパティを設定した親要素が「flexコンテナ」、その子要素は「flexアイテム」と呼ばれます。

画像1

親要素にflexプロパティを設定することによって、各要素の配置、順番を柔軟に変更できるようになります。

<html記述>


					<div class=”container”>
					<div class=”item”></div>
					<div class=”item”></div>
					<div class=”item”></div>
					</div>
				

html記述だけだと以下のように全ての要素が横幅いっぱいで縦に広がっています。

画像2

<css記述>


					.container {
					display: flex;
					}
				

上記のように親要素に「display: flex;」を指定するだけで、縦に並んでいた要素が以下のように全てが横並びになります。これがflexboxの基本の形ですね。

画像3

Flexプロパティと値

先程の形が基本で、さらにプロパティと値を指定することによって細かく要素の配置、形を指定することができます。よく使うものをご紹介します。

flex-direction

このプロパティでは、要素の方向を決めます。

row(初期値) 子要素を左から右に配置
row-reverse 子要素を右から左に配置/rowの逆
column 子要素を上から下に配置
column-reverse 子要素を下から上に配置/columnの逆

子要素を左から右に配置する(row)が初期値ですが、row-reverseを指定した場合、以下のように基本と逆の順番に並びます。

画像4

flex-wrap

flex-wrapでは、要素の折り返しを指定します。

nowrap(初期値) 折り返しを行わず、子要素を左から右へと配置
wrap 子要素を折り返す
wrap-reverse 子要素がコンテナの幅を超える場合は折り返し、複数行に下から上へ並べる

初期値のnowrapのままだと、折り返しを行わないため、画面サイズが小さい場合や子要素の幅が親要素の幅を超える場合も、1列に並んだままになります。
なので改行する場合などは必ずwrapを指定し、要素が改行できるようにします。

画像5

justify-content

justify-contentでは、水平方向の配置を指定します。

flex-start(初期値) 左揃えで要素を配置
flex-end 右揃えで要素を配置/flex-startの逆
center 水平方向の中央に要素が配置
space-between 最初と最後の子要素はコンテナの両端、残った要素は均等な余白で配置
space-around 全ての要素が均等の余白で配置
betweenと違い、コンテナ内の両端にも余白

justify-contentは実際に見た方がわかりやすいと思うので全パターンの図を。私が実務で使うことが多く感じるのは「center」と「space-between」かなと思います。

画像6

align-items

align-itemsでは、垂直方向の配置を指定します。

stretch(初期値) 親要素の高さか要素の中で一番高い子要素の高さに合わせて配置
flex-start 親要素の上揃えで配置
flex-end 親要素の下揃えで配置
center 縦の中央配置
baseline ベースラインで揃えられた配置

stretch
stretchは下のようにテキストの長さが違っても、子要素の高さは揃います。

画像7

flex-start
flex-startの場合は背景色などがないと一見stretchと同じですが、子要素の高さはバラバラです。

画像8

center
そしてcenterの場合は天地中央、これも割と頻繁に使う印象です。

画像9

まとめ

今回はflexboxについての記事でした。
次回はfloatについて、またflexboxとfloatの違いについての記事を書かせていただきます。
ぜひ次回もよろしくお願いします!