CSS

【css flex】ならべるならFlexbox。基本と便利な使い方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

cssのflexとは要素を横並びにするのに最適なレイアウトモジュールです。折り返し、並び替えなども可能でfloatとはちがいclearの必要もなくさまざまな要素の並びに対応できます。

flexの設定として重要となってくるのがボックス要素を囲う flexコンテナ(親要素)と実際に並べられるflexアイテム(子要素)によって、設定するCSSプロパティが違うことです。

まずflexコンテナ(親要素)をwrap_content、flexアイテム(子要素)にboxとクラスを設定しておきます。

HTML

<div class="wrap_content">
	<div class="box">①この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
	<div class="box">②この文章はダミーです。</div>
	<div class="box">③この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</div>
	<div class="box">④この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
	<div class="box">⑤この文章はダミーです。</div>
</div>

cssではflexコンテナ(親要素)にdisplayで設定します。
flex-wrapで折り返しを設定できます。

CSS

/* flexコンテナ(親要素) */
.wrap_content{
	display: flex; /* flex設定 */
	flex-wrap: wrap; /* 折り返しあり */
	margin: 30px 0 150px 0;
	justify-content: center; /* flexboxを中央寄せに配置 */
}
/* flexアイテム(子要素) */
.wrap_content .box{
	padding: 3%;
	background: #58ffde;
	width: 30.33%;
	margin: 10px 1.5%;
}

サンプル

flexコンテナ(親要素)にflex-directionを追加して flexアイテム(子要素) の並ぶ向きを設定します。row-reverseで逆向きになります。

その他columnで縦並び、column-reverseで逆からの縦並びになります。

.wrap_content{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 150px 0;
	flex-direction: row-reverse;
}
.wrap_content .box{
	padding: 3%;
	background: #58ffde;
	width: 30.33%;
	margin: 10px 1.5%;
}

サンプル

flexコンテナ(親要素)に justify-contentを追加してflexアイテム(子要素) の並びの間隔を設定します。 space-betweenで両端揃えになります。

その他flex-endで後ろから、centerで中央寄せ、space-aroundで等間隔となります。

.wrap_content{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 150px 0;
	justify-content: space-between;
}
.wrap_content .box{
	padding: 3%;
	background: #58ffde;
	width: 200px;
	margin: 10px 1.5%;
}

サンプル

flexコンテナ(親要素)にalign-contentを追加してflexアイテム(子要素) の垂直の位置を指定します。 centerで垂直中央ぞろえになります。

その他flex-startで上から詰める、flex-endで下から詰める、space-betweenで上下 両端揃え、space-aroundで等間隔となります。

.wrap_content{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 150px 0;
	justify-content: space-between;
	height: 700px;
	align-content: center;
}
.wrap_content .box{
	padding: 3%;
	background: #58ffde;
	width: 200px;
	margin: 10px 1.5%;
}

サンプル

ここまでは主にflexコンテナ(親要素)の設定での基本的なレイアウトになります。次に解説するflexアイテム(子要素)の設定では要素の入れ替えなど、さらに緻密なレイアウトが可能になります。

flexアイテム(子要素) にorderを設定します。

HTML

各々にbox1などのクラスが設定されていると便利です。

<div class="wrap_content5 white">
	<div class="box box1">box1</div>
	<div class="box box2">box2</div>
	<div class="box box3">box3</div>
	<div class="box box4">box4</div>
	<div class="box box5">box5</div>
</div>

orderは数値が小さいほうか並び替えられます。
( 設定の仕方はcssのz-indexと同じ感覚です。 )
また、orderを設定したflexアイテム(子要素)は設定してないflexアイテム(子要素)よりも後に配置されます。

CSS

box5→ box3→ box4→ box1→ box2の順に並べるとすると下記のようになります。

.wrap_content{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 150px 0;
}
.wrap_content .box5{	order: -2;}
.wrap_content .box3{	order: -1;}
.wrap_content .box4{	order: 0;}
.wrap_content .box1{	order: 1;}
.wrap_content .box2{	order: 2;}

flexアイテム(子要素)にクラスが設定できない場合は以下のほうに疑似クラスでも設定可能です。

.wrap_content .box:nth-of-type(5){	order: -2;}
.wrap_content .box:nth-of-type(3){	order: -1;}
.wrap_content .box:nth-of-type(4){	order: 0;}
.wrap_content .box:nth-of-type(1){	order: 1;}
.wrap_content .box:nth-of-type(2){	order: 2;}

サンプル

flexアイテム(子要素) にalign-selfを設定すると垂直の位置を設定できます。

その他flex-startで上から詰める、flex-endで下から詰める、stretchで高さに合わせてflexアイテム(子要素)の高さを伸ばす、baselineであわせることができます。

.wrap_content{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 150px 0;
	height: 700px;
}
.wrap_content .box3{
	align-self: center;
}

サンプル

flexアイテム(子要素)にflex-growを設定すると幅の伸びの比率を設定できます。
※この伸びの比率はflexアイテム(子要素)内のテキストなどを除いた計算になります。以下だと1:2:3:4:5になります。

.wrap_content7{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 150px 0;
}
.wrap_content .box1{	flex-grow: 1;}
.wrap_content .box2{	flex-grow: 2;}
.wrap_content .box3{	flex-grow: 3;}
.wrap_content .box4{	flex-grow: 4;}
.wrap_content .box5{	flex-grow: 5;}

サンプル

flexアイテム(子要素)にflex-shrinkを設定すると幅の縮みの比率を設定できます。

※flexアイテム(子要素)の幅の合計がflexコンテナ(親要素)からはみ出した場合そのはみ出した分を縮める比率になります。単純にボックスの幅を見ているわけではありません。

.wrap_content{
	display: flex;
	flex-wrap: nowrap;
	margin: 30px 0 150px 0;
}
.wrap_content .box{
	padding: 3%;
	background: #58ffde;
	margin: 10px 0.5%;
	text-align: center;
	font-size: 200%;
	width: 24%;
}
.wrap_content .box2{
	flex-shrink: 2;
}

サンプル

上記では基本flexコンテナ(親要素)がブロック要素の場合で解説してきました。

flexコンテナ(親要素)をinlineにしたい場合はdisplay: inline-flex;を設定することができます。

flexアイテム(子要素)の幅は内容に依存するのでキーワードリンクを作るときなどに適しています。

サンプル

floatでボックスを並べる時代が終わりflexが浸透してしばらくたちますがボックス系のレイアウトでは欠かせない存在となっています。

要素の並び替えができるのもレスポンシブデザインでとても重宝します。

個人的にはflex-grow、 flex-shrinkの解釈の仕方がわかりずらそうと感じました。

uhaha

なんでもかんでもflexしすぎて、回り込みが必要なレイアウトのときそっとfloatになおしたことありますw

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*