Flexbox
はじめに
友達にFlexboxはやっといた方がいいよと言われたので、ドットインストールのFlexbox入門で勉強しました。
そのときのメモです。
- flex containerの設定(display: flex;)
- flex boxがflex containerの子要素たちが設定される
- flex-directionがデフォルトでrow方向（変更可能）に設定される。(rowに平行な方向をmian axis,垂直方向をcross axis)
- flex itemはmain axisに沿って並べられる。
プロパティ一覧
| flex container | flex item |
|---|---|
| flex-direction | order |
| flex-flow | flex-grow |
| justify-content | flex-shrink |
| align-items | flex-bassis |
| align-content | align_self |
flex container
flex-direction
flex-direction: row;(デフォルト)
flex-direction: column;
flex-direction: row-reverse;逆順
flex-direction: column-revers;逆順
flex-flow
flex-flow: nowrap;（デフォルト）折り返しなし
flex-floe: wrap;折り返し有り
flex-flow: warp-reverse;逆折り返し
flex-flowでflex-direction,flex-warpを空白区切りで両方選択可能
fustify-content
justify-content: flex-start;（デフォルト）左揃え
justify-content: flex-end;右揃え
justify-content: center;中央揃え
justify-content: space-between;要素間の余白を均等化する
justify-content: space-around;要素数で均等に余白を作り、両端にも余白を作る
align-items
align-items: flex-start;（デフォルト）cross-axis方向の上に揃える
align-items: flex-end:cross-axis方向の下に揃える
align-content
align-content: flex-start;中身に合わせて大きさを揃え上に揃う、また、このほかにend,centerがあるが、fustify-contentに同じ
align-content: space-between;要素間の余白を均等にする
align-content: space-around;要素間の余白を均等にし、その後、両端に余白を設定する。
flex item
order
デフォルト値:0
大きいほどmain-axis方向に後に整列する
プログラムの配列番号と同じ感じ
aline-self
デフォルト値:0
大きいほどcross-axis方向に後に整列する
プログラムの配列番号と同じ感じ
1,flex-grow
要素を並べていって、余白ができた時にどの要素をどれだけ広げる
2,flex-shrink
要素を並べていって、container よりあふれてしまった場合、どの要素をどれだけ縮めるかの指定
3,flex-bassis
flex-grow、flex-shrinkの計算をする時に基準となる幅や高さ
1,2,3はflex:で一気に指定
flex:flex-grow flex-shrink flex-bassis;
flex: 0 1 auto;（デフォルト）
flexボックスだと簡単margin
margin: auto;（デフォルト）
margin-left: auto;要素の左側に余白を持ってくる
margin-right: auto;要素の右側に余白を持ってくる
margin-bottom: 要素の外側の下に余白を作成
flexboxだと楽にカラムレイアウト
flex:1;
にするとうまく対応してくれる！
最後に
こちらの講座はプレミアムの講座のため有料です。
僕は初心者なのでよくこちらのサイトで勉強させていただいています。
これからも使わせていただきます