flexboxを使用するメリット
・要素の並べ替えや順序の変更が楽
・余白や余剰分の整地、均等幅配置など要素の配置方法がシンプル
・要素の重ね合わせにも柔軟に対応
【基本事項】
■構成
・コンテナで領域を定義
・コンテナの中にflex Itemを配置
・配置方向(flex-direction)の初期値はrow(行)
・rowの場合、行方向をmain axis 列方向をcross axisと言う
■指定方法
親要素に以下を指定
display: flex;
■範囲
適用範囲は直近の子要素のみ
【コンテナ単位の操作】
■方向と順序
flex-direction: column; //縦に並べる flex-direction: row-reverse; //右から並べる
■折り返し
flex-wrap: wrap; //デフォルトはno-wrap(折り返ししない)
※方向と順序・折り返しに関しては
flex-flowで同時に指定も可能
■要素を横方向に均等幅で配置する
親要素 display: flex; 子要素 ※均等幅で配置したい flex: 1;
■中身を揃える ：justify-content
justify-content: center; //横方向に中央揃え ※flex-endで右揃え、flex-startで左 justify-content: space-between; //要素間の余白を均等する justify-content: space-around; //paddingを均等に分配
・縦方向に揃える
align-items: center; //縦方向に中央揃え ※flex-endで下揃え、flex-startで上 align-items: stretch; //縦方向に均等に拡大して配置 ※heightがあると機能しない
・中身のコンテンツに合わせて行の高さをそろえる
align-content: flex-start; //justifyと同様にbetweenなど使用可能
【アイテム単位の操作】
■アイテムの並べ替え ：order
order: 1; //初期値は0なので他のアイテムより後ろにくる
■特定の要素だけ配置軸方向を変える ：align-self
align-self: flex-end; //この要素のみ縦軸最下段に設定
■余白やはみだしを調整する ：flex
※grow(余白),shrink(オーバー),basis(基準)を同時に指定している
※初期値はflex: 0 1 auto; //autoは要素の中身の大きさ
第1引数(grow)：余白を分配する際の比率
第2引数(shrink)：余剰を削る分の比率
第3引数(basis)：要素の大きさpx
■余白のコントロール ：margin: auto
margin: autoを指定することで、指定の要素に余った余白を足し上げることができる。
そうすることで、要素自体の位置が変わるため、配置のテクニックとして用いられる。
例）
box1、box2、box3、があり、余白が右に60pxあったとする。
ここで、box3に margin-left: auto を指定すると
box3の左側にに60pxの余白がmarginとして含まれるようになるため
結果として、box3が右寄せされる。
■画像付きリスト
.container {
display: flex;
margin-bottom: 1em;
align-items: flex-start;
}とすると簡単に画像付き記事を作ることができる
※今まではfloatとclearを使わなければならなかった
■レスポンシブ対応への応用
@media all and (max-width: 600px) {
.class {
flex-direction: column;
}
}と指定すると600px以下の画面幅で縦並びにシフトされる
