• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

Flexible Boxについて(flexアイテム編)

投稿者アイコン
2019/07/29
書いた人:
rurippa!
カテゴリ:
CSS
143 views

flexアイテムに指定できるプロパティを紹介します。

Flexible Boxについて(flexアイテム編)

順番を入れ替えたり、子要素の伸縮率でを指定したり。flexアイテムに指定できるプロパティをまとめて紹介します。

目次

ベースのHTML

今回はul、liを使って紹介します。他のタグでももちろんOKです。

		<ul class="sample">
			<li class="item01">1</li>
			<li class="item02">2</li>
			<li class="item03">3</li>
		</ul>
		
		.sample{
			display: flex;
		}
		

また、今回はflexアイテムに対して指定するプロパティについて紹介します。

flex_img01

order

flexアイテムの順番を変えられます。マイナスの数値も可能。初期値は0です。

		.item01 { order: -1;}
		.item02 { order: 3;}
		.item03 { order: 0;}
		.item04 { order: 2;}
		.item05 { order: 1;}
		
  • 1
  • 2
  • 3
  • 4
  • 5

flex-grow

flexコンテナーにスペースがある場合、flexアイテムの伸びる比率を指定できます。

		.item01 { flex-grow: 1;}
		.item02 { flex-grow: 2;}
		.item03 { flex-grow: 0;}
		
  • 1
  • 2
  • 3

flex-shrink

flex-growとは真逆のプロパティです。flexコンテナーにスペースがない場合、flexアイテムの縮む比率を指定できます。初期値は0です。

		.item01 { flex-shrink: 1;}
		.item02 { flex-shrink: 2;}
		.item03 { flex-shrink: 0;}
		
  • 1
  • 2
  • 3

flex-basis

flexアイテムの幅を、widthと同じように決めることができます。初期値はautoです。

		.item01 { flex-basis: 1;}
		.item02 { flex-basis: 2;}
		.item03 { flex-basis: 0;}
		
  • 1
  • 2
  • 3

flex

「flex-grow」、「flex-shrink」、「flex-basis」の順でまとめて指定できるショートハンドです。

		/*記述例*/
		.item01 { flex: 1 0 40%;}
		

align-self

align-itemと同じように垂直方向の指定ができますが、flexアイテムに対してになります。また、flexコンテナーの指定(align-item)よりも優先されます。

		.item01 { align-self: center;}
		.item02 { align-self: flex-end;;}
		.item03 { height: 150px;}
		
  • 1
  • 2
  • 3

まとめ

いかがでしたか?
今回はflexアイテム編でしたが、よければこちらも合わせて読んでみてくださいね。
Flexible Boxについて(flexコンテナー編)」それでは、みなさん善きコーディングライフを♪


この記事を読んだ人はこんな記事も読んでいます