転職支援どっとこむ

プログラミング学習、転職について情報発信しています。

NEW ARTICLE
テックキャンプでwebマーケティングは学べるの?
  1. HOME
  2. 転職・キャリア
  3. フレックスボックス(flexbox)とは?【すぐ分かる】

フレックスボックス(flexbox)とは?【すぐ分かる】

フレックスボックス(flexbox)とは?【すぐ分かる】



フレックスボックスについてわかりやすく教えてほしいです。



こんな悩みを解決していきますね。



※コードペンの使い方　図が見辛い場合は以下で調整してください。



今回は便利なフレックスボックスについて説明しようと思う。



どんな時に使うんですか?



要素を簡単な記述で横並びにしたり縦並びにしたり配置の間隔を決めたり、自由な配置ができるプロパティじゃ。レスポンシブ対応する時にも簡単な修正で済むので今やweb制作において必須級ともいえるじゃろう。便利なものなので極力全部覚えるようにしよう。



目次

親要素に指定できるプロパティ一覧



基本のキ　display:flex(display:inline-flex)



初めにこの設定をすることでフレックスボックスが適用されるようになる。インライン要素の場合はdisplay:inline-flexと記述しよう。



※display:flexを指定することで、親要素はフレックスコンテナ(箱)、子要素はフレックスアイテム(中身)に分類されます。



親要素に指定できるflexプロパティ一覧



display:flex　　　　フレックスボックスの利用開始　　　　　　　　
flex-direction子要素を縦並び、横並びなどの並び順を指定
justify-contentflex-directionで決めた方向に沿って水平方向(横方向)の配置の間隔を決める。
align-itemsflex-directionで決めた方向に沿って垂直方向(縦方向)配置の間隔を決める。
flex-wrap子要素を一列または複数行に並べる。



flex-directionとは?



flex-direction:row (初期値)左から右に配置　　　　　　　　
flex-direction:row-reverse右から左へ配置
flex-direction:column上から下へ配置
flex-direction:column-reverse下から上へ配置



rowが左から右へ、columnが上から下へ　reverseがつくと逆になるっていう感じで覚えれば楽じゃぞ
以下がサンプルじゃ。



flex-direction:row (初期値)の場合

See the Pen BajpWxm by kazuto1027 (@kazuto1027) on CodePen.dark



flex-direction:columnの場合

See the Pen MWKJpBZ by kazuto1027 (@kazuto1027) on CodePen.dark



justify-contentとは?



justify-content:flex-start(初期値)flex-directionで決めた方向(主軸)の開始位置の始点
justify-content:flex-end主軸の開始位置の終点
justify-content:center中央に配置
justify-content:space-between両端から均等に配置
justify-content:space-around均等間隔に配置



justify-contentは、まずflex-directionで決めた方向のさらに配置をどうするかを決めるプロパティだゴリね。



justify-content:flex-start(初期値)の場合

See the Pen GRoryRo by kazuto1027 (@kazuto1027) on CodePen.dark



・justify-content:flex-endの場合

・justify-content:centerの場合

・justify-content:space-betweenの場合

j・ustify-content:space-aroundの場合



align-itemsとは?



align-items:stretch(初期値) 子要素の高さに合わせて自動調整　※heightが指定されていない場合
align-items:flex-startflex-directionで決めた方向とは反対方向(交差軸)の開始位置の始点
align-items:flex-end交差軸の開始位置の終点
align-items:center交差軸の中央に配置
align-items:space-baselineベースライン(基準)に合わせる。



align-itemsは、まずflex-directionで決めた方向の交差軸に対して配置をどうするかを決めるプロパティじゃ。
簡単にいうならばflex-directionが初期値なら、justify-contentがX軸、align-itemsがY軸に対する配置を決めるプロパティじゃな。




align-items:stretchの場合

See the Pen GRormKO by kazuto1027 (@kazuto1027) on CodePen.dark



・align-items:flex-startの場合

—————————————————————————————————–

—————————————————————————————————–

・align-items:flex-endの場合

—————————————————————————————————–

—————————————————————————————————–

・align-items:centerの場合

—————————————————————————————————–

—————————————————————————————————–

・align-items:space-baselineの場合

—————————————————————————————————–

—————————————————————————————————–



flex-wrapとは?



flex-wrap:nowrap(初期値)子要素を一行に収める。(width指定されてても強制的に1行に収める)
flex-wrap:wrap子要素が一行に収まらない時は複数行に折り返す。
flex-wrap:wrap-reverse子要素が一行に収まらない時は複数行に折り返す。その際順番を逆にする。



flex-wrapは要素を行内に収めるかどうかを設定するプロパティだワン。



See the Pen wvMgPPK by kazuto1027 (@kazuto1027) on CodePen.dark

flex-wrap:wrap

flex-wrap:wrap-reverse



子要素に指定できるflexプロパティ一覧



order子要素の並び順を決める。1が始点(最初)になる。
flex-basiswidthと同じ意味。 widthが指定されていた場合はflex-basisの値が優先される。
flex-grow他の子要素と比べてどれだけ伸ばすかを決める。
flex-shrink子要素の幅の合計が親要素を超えた場合に、他の子要素と比べてどれだけ縮めるかを決める。



orderプロパティ



See the Pen oNbBppX by kazuto1027 (@kazuto1027) on CodePen.dark



flex-basisプロパティ



flexレイアウトで画像と文字を横並びにしたい時、間に隙間を作る時に使ったりできるから便利じゃの。



See the Pen abdpqbv by kazuto1027 (@kazuto1027) on CodePen.dark



flex-growプロパティ



See the Pen dyGNdpW by kazuto1027 (@kazuto1027) on CodePen.dark



flex-shrinkプロパティ



flex-shrinkプロパティは子要素の合計幅が親要素の幅より大きい場合に適用されるよ。例えば親要素が1000px、子要素の合計が2000pxだった場合、適用されている数値によって子要素が縮むんだ。



See the Pen xxZgYdE by kazuto1027 (@kazuto1027) on CodePen.dark



まとめ

いががでしたでしょうか?覚える事はたくさんありますが、WEB制作にあたり重要なプロパティですので是非とも覚えるようにしましょう!

合わせて読みたい記事はこちら

Prev→→→未経験向けに徹底解説!レスポンシブWEBデザインとは?【スマホ対応】

Next→→→未経験向けに徹底解説!WEBデザイン positionプロパティ編