flexレイアウトその３ | WEB制作の備忘録めもミフネWEB

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

INDEX

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

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

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

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

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)に設定しています。

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

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

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

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

flex-direction の値が、row ・row-reverse ・column ・column-reverse　の４種類。
flex-wrap の値が、 wrap ・nowrap ・wrap-reverse　の３種類あるので、１２通りの指定ができます。

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

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

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