【コーディング初心者向け】フレックスボックスの使い方

コーディングでよく使うフレックスボックス!!
そのオプションについてご説明させて頂きます。

「display: flex;」

親要素に設定する事で子要素が横並びに表示されます。

サンプル

			

				
box01
			

			

				
box02
			

			

				
box03
			

			

				
box04
			

			

				
box05
			

			

				
box06
			

	

表示サンプル

縦並びのオプション「flex-direction: column;」

flex-direction: column;を付けるとは縦並びになります。

サンプル

			

				
box01
			

			

				
box02
			

			

				
box03
			

			

				
box04
			

			

				
box05
			

			

				
box06
			

	

表示サンプル

折り返しの指定「display: flex;」

display: flex;を付けるとはみ出した要素が下に折り返されます。

サンプル

			

				
box01
			

			

				
box02
			

			

				
box03
			

			

				
box04
			

			

				
box05
			

			

				
box06
			

	

表示サンプル

横並びの指定

横並びの指定には色々な指定方法がございます。

「justify-content: flex-end;」
要素の一番最後揃え
「justify-content: center;」
要素のセンター揃え
「justify-content: space-between;」
要素の先頭と最後の要素を両サイドに配置し、残りの要素を均等に並べる
「justify-content: space-around;」
全ての要素を均等に並べる。

縦並びの指定

縦並びの指定には色々な指定方法がございます。

「align-items: flex-start;」
縦方向の先頭揃え
「align-items: center;」
縦方向のセンター揃え
「align-items: flex-end;」
縦方向の最後に揃える

並びの順番を変える

「order:数字;」を指定する事により、数字の少ない順に表示されます。

サンプル

			

				
box01
			

			

				
box02
			

			

				
box03
			

			

				
box04
			

			

				
box05
			

			

				
box06
			

	

表示サンプル