人気記事
【基礎徹底】CSS Flexboxって何?使い方を学んで実践へ
  1. こんにちは!たかだひかる(@hikaru_makemon)です!

最近PCでの作業が増えて運動不足が加速し、体型が気になりはじめてしまいました、、、猛省!!

そういうことで、最近の目標は食生活の管理と意識的な運動を掲げていますが、そんな話は置いといて、、

 

今日はCSSの中でもかなり便利な"Flexbox"についてお話していきたいと思います。

 

Flexboxと聞くとこのように思う人も多いのではないでしょうか?

 

「Flexboxって配置をいじれるやつだよな。」

 

「正直floatやdisplayとの違いがわからない。。。」

 

僕も学びたてのころは正直そういった印象がありました。

しかし理解してみると、意外と使い勝手がよく柔軟で可愛いやつということに気づいたので、今回の記事を通じて皆さんにもその気持ちをわかっていただきたいなと思っております!(笑)

(きっと読み終わるころにはFlexboxが恋人になってるでしょう)

 

Flexboxとは?

FlexboxとはCSSフレキシブルボックスレイアウトのことを指し、ボックスを並べる方向を自由に設定できるレイアウト手法となっています。

 

Flexboxは名前の通りフレキシブルであるため、同じように配置をいじれる"float"や"margin"といった他のプロパティに比べて癖が少なく扱いやすいのが特徴になります!

 

CSSに以下のコードを記すだけで親要素がFlexboxになり、子要素が左から右に並んで表示されるようになります。

display:flex;

イメージはこんな感じです

 

また関連するプロパティを使用することで左から右だけでなく、右から左、上から下、個別で順番を変更といったように自由に変更を加えることもできます。

htmlの要素の順番を気にすることなくCSSだけで調整することができるのでレイアウトを崩してしまう心配も無用です!

 

覚えておくべきFlexプロパティ

Flexboxを理解する上で避けては通れないのが見出しにも書いてあるFlexプロパティになります!

 

しかし、プロパティを一気に覚えようとしてもなかなか覚えにくいかと思いますので、2つのグループに分けて覚えていくことをオススメします。

その2つのグループとはこちら!

 

FlexコンテナFlexアイテム

 

Flexコンテナ=親要素 Flexアイテム=子要素 という認識を持っていただければ大丈夫です。

 

それでは、それぞれのグループに存在するプロパティを紹介していきます!

 

Flexコンテナ

1flex-direction

"flex-direction"は要素がどのように配置されるのか方向を決めることができるプロパティになります。

 

display: flex;
flex-direction: row;

 

このように値にrowをとると、要素が左から右に配置されていきます。

この状態は"display: flex;"と同じ状態になります。

 

逆に、右から左へと要素を配置したい場合は、

display: flex;
flex-direction: row-reverse;

 

"row-reverse"という値を設定すると配置することができます。

 

今度は縦に要素を配置したいと思った時どうすればいいのかというと、

display: flex;
flex-direction: column;

 

"column"を値にとることで、上から下の縦方向に配置することができます。

 

display: flex;
flex-direction: column-reverse;

 

逆に"column-reverse"を設定すれば、下から上への配置になります。

 

2flex-wrap

"flex-wrap"は子要素の折り返しを指定するプロパティになります。

 

display: flex;
flex-wrap: nowrap;

 

"nowrap"を設定すると、要素の数に関係なく横一列で表示され、折り返しも行われなくなります。

 

display: flex;
flex-wrap: wrap;

 

"wrap"を設定することで折り返しを行うようになります。

また、一列あたり何個の子要素を表示するかは、子要素の幅をいくつに設定するかで変わってくるので必要に応じてそちらも設定しなければなりません。

 

また、値を"wrap-reverse"とすれば左下を起点に横方向に配置されていくように設定することもできます。

 

3flex-flow

ここまで読まれた方、こう思いませんでしたか?

「"flex-direction"と"flex-wrap"をイチイチ書いていくのめんどくさい、、、」

 

そんなあなたに!2つの設定を一括ですることができるプロパティをお伝えしたいと思います!

 

"flex-flow"

 

こちらのプロパティを使用すれば、配置の方向と折り返しの有無を同時に設定することができます。

 

display: flex;
flex-flow: row wrap;

 

このように、先ほど紹介したプロパティの値をそれぞれ入れるだけで大丈夫ですので是非覚えておきましょう!

 

4justify-content

"justify-content"では水平方向の要素の配置をする際に使用するプロパティになります。

 

display: flex;
justify-content: flex-start;

 

"flex-start"は最初の状態で要素が左から右に配置されます。つまり左よりの状態になります。

 

 

逆に要素を右寄りの状態にしたい場合は、"flex-end"を使います。

 

display: flex;
justify-content: flex-end;

 

このように記述することで、要素が右から左に配置されるようになります。

 

「じゃあ要素を中央に配置したいときはどうすればいいの?」と思われる方もいらっしゃいますよね!

そんな時は"center"を使用しましょう。

 

display: flex;
justify-content: center;

 

このように記述することで要素を中央配置にすることができます。

 

これで左右中央好きな位置に要素を配置することができるようになりましたね!

 

しかしもしかしたら上記の位置ではなく、要素を均等な位置に配置したいと思われた方もいるかもしれません。

そんな時はこちらを記述してみてください。

 

display: flex;
justify-content: space-between;

 

"space-between"を使用することで、要素が均等に配置されます。しかしこのプロパティは両端の要素のみコンテナの両端に余白なく密着します。

 

両端もしっかり余白をつけたい!という方はこちらを記述してみてください。

 

display: flex;
justify-content: space-around;

 

"space-around"であれば、両端の要素を含めてそれぞれの要素に余白が生まれます。

 

これらのプロパティを使用することで水平方向であれば自由に配置することができるようになります。

 

5align-items

"justify-content"が水平方向の配置を決定するのに対して、"align-items"は垂直方向の配置を決定するのに役立ちます。

 

 

display: flex;
align-items: stretch;

 

"stretch"は初期の値で、こちらを設定すると最も高い要素に高さを合わせてくれます。

 

"align-items"でも先ほどの"justify-content"と同様に、"flex-start" "flex-end" "center"の3つが登場します。

 

display: flex;
align-items: flex-start;

 

"flex-start"を設定すると、垂直方向の上側から下側に向かって配置されます。

 

display: flex;
align-items: flex-end;

 

"flex-end"では、垂直方向の下側から上側に向かって配置されます。

 

display: flex;
align-items: center;

 

"center"を使用すると上下の間の中心に配置されるようになります。

 

display: flex;
align-items: baseline;

 

また、"baseline"を使用することで、子要素がベースラインに従って配置されます。

 

"justify-content"と"align-items"を使いこなすことで、水平方向と垂直方向に要素を自由に配置できるようになるため、覚えない理由はないですね!

 

6align-content

"align-content"は複数の行で構成された要素の配置を決定します。

 

display: flex;
flex-wrap: wrap;
align-content: stretch;

 

stretchは「flex-wrap: warp;」で要素を折り返した時に子要素の高さが決められていない場合に自動的に親要素の高さに合わせて子要素の高さを調整します。

 

"align-content"にも先ほど同様 "flex-start" "flex-end" "center"が存在します。

そしてそれらの動きは、"align-items"に設定した時と同様に上に寄るのか下に寄るのか、中央配置なのかといった動きになります。

 

また、"space-between"と"space-around"も存在します。

今回この2つは縦方向で要素を均等に配置したい時に使用します。

そしてこちらも先ほど同様に、端の要素にも余白を設定したいときは、"space-around"を用います。

 

ここまで紹介したことを理解することができれば、親要素を自分の思うようにいじることができます!

 

Flexアイテム

そしてここからは子要素をいじる際のプロパティを紹介していきます。

ここまで長くなりましたが、もう少しでフィニッシュです!

 

1order

order: 1;

 

"order"というプロパティに、数値を指定することで、要素の順番を変えることができます。

orderを指定しない状態であれば左から右に配置されていますが、子要素に"order"を記述し、数値を指定することで、自分の好きな順番で配置することができます。

 

2flex-grow

flex-grow: 1;

 

"flex-grow"は親要素に余白がある場合、その余白に対してどの程度特定の要素の幅を伸ばせるかの指定をすることができます。

数値が1と設定されている場合はデフォルトの大きさとなるため、この数字を大きくすることによって余白も大きくなります。

 

3flex-shrink

flex-shrink: 1;

 

"flex-shrink"は"flex-grow"の逆で、親要素に余白がない場合、その余白に対してどの程度特定の要素の幅を縮められるかを指定することができます。

こちらもデフォルトの値が1となり、数字を大きくすることで縮小する幅も大きくすることができます。

 

4flex-basis

flex-basis: 30%;

 

"flex-basis"は子要素の横幅を指定します。"auto"と設定すると、子要素のもともとの幅が反映されます。

"width"を設定した時と同じイメージを持っていただければわかりやすいかと思われます。

 

5flex

flex: 2 3 40%;

 

"flex"はここまで紹介してきた子要素への指定が一括で指定できるプロパティになります。

子要素を指定するプロパティをしっかりと理解していれば、この"flex"を指定するだけで簡単に調整することができます。

 

6align-self

こちらのプロパティは、垂直方向の配置を決めます。

先ほど紹介した親要素に指定する"align-items"と同じ効果を出すことができます。こちらは子要素に対して指定しますが、"align-self"は"align-item"よりも優先されます。

動きは"align-item"と同じと思っていただけたら理解できるはずです!

 

最後に

いかがだったでしょうか。今回紹介したFlexboxを理解することで、コーダーとしてのスキルをグンっとアップさせることができます!

もうこれは理解しない手はないですよね。

それでは次回の記事でまたお会いしましょう!

 

ご清覧ありがとうございました!

Twitterでフォローしよう

おすすめの記事