flexレイアウト その3

flexレイアウトの第3回です。前回までが基本の内容でしたので、ここから少しずつ発展した内容になります。
前回、前々回は以下のリンクから。

flexアイテムを縦並びにするflex-direction

flexを指定したボックスの子要素は横並びですが、これを縦並びに変更するプロパティflex-directionです。

縦に並べるのだったら別にflexを指定する必要は無いのではと思われそうですが、子要素を等幅・等間隔など一括でレイアウトを整えられるのがflexならではの特徴です。たとえばサイド固定のナビゲーションメニューを設置するときなどに役立ちます。

flex-directionの値に" column " とすれば縦並び。初期値は" row " の横並びです。

縦並びのときはjustify-content、align-itemsの方向も変わる

flexアイテムが縦方向になったとき、横方向の間隔を指定していたjustify-content は縦方向の間隔に。
おなじく、縦方向の大きさや間隔を指定していたalign-items(align-self)やalign-content は横方向の指定に変わります。

横並びが縦並びになるので、そのまま向きが変わると素直に理解すれば大丈夫でしょう。

レスポンシブデザインで、スマホでは縦並び/タブレット以上で横並び のように変化させるときは注意です。

*下サンプルの共通設定
div{
 display: flex;
 width: 100%;
 height: 250px;
 flex-wrap: wrap;
 justify-content: space-between;
 align-content: center;
}

上サンプルは横並び(flex-direction:row)、下サンプルは縦並び(flex-direction: column)に設定しています。

1
2
3
1
2
3

flexアイテムを逆順に並べる -reverse

また、それぞれに" -reverse “をつけると、逆順に並びます。
row-reverse とすれば、逆順の横並び。
column-reverse とすれば逆順の縦並びです。

#{
flex-direction: row ;  横並び(初期値)
flex-direction: column ;  縦並び
flex-direction: row-reverse ; 逆順の横並び
flex-direction: column-reverse ; 逆順の縦並び
}

flex-flow

個人的にはあまり使いませんが、こんなプロパティもあるよということでflex-flowプロパティをご紹介しておきます。使いこなせると便利です。

flex-flowプロパティを使うと、flex-wrapとflex-direction を一括で指定できます。(例: flex-flow: row wrap ;)

flex-direction の値が、row ・row-reverse ・column ・column-reverse の4種類。
flex-wrap の値が、 wrap ・nowrap ・wrap-reverse の3種類あるので、12通りの指定ができます。

flexアイテムの順番を入れ替える orderプロパティ

flexアイテムの並び順を指定し入れ替えることができます。
order: 1 ;が先頭。以下2,3,、、と続きます。

でも載せたサンプルですが、これはflex-direction:column で縦並び & 全てのアイテムにorder:3を指定した上で、クリックされたアイテムにだけorder:1をつけることで並び替えをしています。(order:2 は白線)

See the Pen CSS moving list radio button by Takashi Abe (@TakeshiAbe) on CodePen.

今回はここまでです。
あとは伸縮関係のプロパティ(grow shrink flex basis)が残っているので、次回が最後の予定です。

→ 「flexアイテムのサイズを決めるgrow shrink flex basis

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年3月8日HTML/CSScss,display_flex,flex-item

Posted by ミフネWEB