[CSS]display:flexで簡単に横並びにすることができるflexboxの使い方

あらすじ

みなさんflex-boxとはご存知ですか。

コーディング経験者や勉強中の方は、一度は耳にしたことがあるはずです。

 

ただ、

と、なかなか実際に使うまでに至ってない方もいるのではないでしょうか。

 

そんな方達に伝えたいのは、「かなり損をしてます」ということです。

今回はそんなflex-boxの使い方をわかりやすく解説していきますので、ぜひ参考にしていただければと思います。

 

 

flex-boxとは

そもそもflex-boxとは、cssで実装できるレイアウト機能のことです。

 

 

それもかなり柔軟かつ自分の思い通りにレイアウトを作成することができます。

前からあった技術ですが、割と最近定着してきました。

 

書き方はhtml内の要素をclassやidなどで指定し、stylesheet(cssファイル)内に記載していきます。

 

 

その際に親要素となるcssに必ず

display: flex;

と記述する必要があります。

 

いきなり親要素と言われてもピンとこないと思いますので、実際のコードを使って詳しく解説します。

html

<div class=”parent”> ←親要素
   <div class=”child”></div> ←子要素
   <div class=”child”></div> ←子要素
   <div class=”child”></div> ←子要素
</div>

css

.parent {
    display: flex; ←ここでflex-boxを使いますよと宣言している
}

 

parentクラス(親要素)に対してdisplay: flex;と宣言することで、親要素内がflex-boxを使用することが可能となります。

 

flex-boxプロパティその1:flex-direction(垂直か並行かを選ぶ)

上記でflexを宣言する方法を学びました。

次は、具体的なレイアウトを作成していく必要があります。

 

flex-direction

親要素内のコンテンツの並び方を決める際に使うのがflex-directionプロパティです。

 

flex-direction: row

See the Pen dyYvGrw by 萩原 英 (@suguru1989) on CodePen.dark

水平方向にコンテンツを並べたい場合はflex-directionの値にrowと記載します。

 

flex-direction: column;

See the Pen WNQprVG by 萩原 英 (@suguru1989) on CodePen.dark

垂直方向にコンテンツを並べたい場合はflex-directionの値にcolumnと記載します。

 

flex-boxプロパティその2:flex-wrap(複数行にコンテンツを回すことができる)

flex-wrapとは親要素内のコンテンツに適用できるプロパティです。

具体的には、ブラウザを縮小した際に、通常ならばコンテンツ自体が縮小していくところ、flex-wrapを使うことでコンテンツ自体の大きさを変えず次の行に移行させることができるプロパティです。

 

flex-wrap

 

flex-wrap: wrap;

See the Pen XWmMNjY by 萩原 英 (@suguru1989) on CodePen.dark

flexwrapの値にwrapと記載することで、コンテンツのサイズを変更することなく複数行に拡散することができます。

 

flex-wrap: wrap-reverse;

See the Pen qBOrZBQ by 萩原 英 (@suguru1989) on CodePen.dark

flex-wrapにwrap-reverseという値を記載すると、wrapとは真逆の方向にコンテンツを拡散することができます。

 

flex-flow

flex-flowはflex-directionとflex-wrapの省略系として使用できます。

 

flex-flow: row wrap;

See the Pen zYvZBxg by 萩原 英 (@suguru1989) on CodePen.dark

最初の値がflex-direction、次の値がflex-wrapとなります。

 

flex-boxプロパティその3:justify-content,align-items(コンテンツの位置を決める)

 

justify-content

justify-contentはコンテンツの、並行方向での位置を決める際に使用します。

 

justify-content: center;

See the Pen jObBqbm by 萩原 英 (@suguru1989) on CodePen.dark

justify-contentの値にcenterを記載すると、コンテンツを水平方向の真ん中に固定することができます。

 

justify-content: space-around;

See the Pen zYvZqqL by 萩原 英 (@suguru1989) on CodePen.dark

justify-contentの値にspace-aroundを記載すると、コンテンツの周りにスペースを与えることができます。

 

justify-content: space-between;

See the Pen gOamrMa by 萩原 英 (@suguru1989) on CodePen.dark

justify-contentの値にspace-betweenを記載すると、コンテンツとコンテンツの間にスペースを与えることができます。

 

justify-content: flex-start;

See the Pen dyYvMXE by 萩原 英 (@suguru1989) on CodePen.dark

justify-contentの値にflex-startを記載すると、コンテンツを水平方向の左に固定することができます。こちらはデフォルトで使用されています。

 

justify-content: flex-end;

See the Pen bGVqpwB by 萩原 英 (@suguru1989) on CodePen.dark

justify-contentの値にflex-endを記載すると、コンテンツを水平方向の右に固定することができます。

 

align-items

align-itemsはコンテンツの垂直方向での位置を決める際に使用します。

 

align-items: center;

See the Pen ExVWKNd by 萩原 英 (@suguru1989) on CodePen.dark

align-itemsの値にcenterを記載すると、コンテンツを垂直方向の真ん中に固定することできます。

 

align-items: stretch; (デフォルト)

See the Pen bGVqpgg by 萩原 英 (@suguru1989) on CodePen.dark

align-itemsの値にstretchを記載すると、親要素内にコンテンツを上から下まで埋めることできます。こちらはデフォルトで使用されています。

 

align-items: baseline;

See the Pen YzyZqVz by 萩原 英 (@suguru1989) on CodePen.dark

align-itemsの値にbaselineを記載すると、コンテンツ内のテキストに合わせて垂直方向に並べることができます。

 

align-items: flex-start;

See the Pen PoPpNjz by 萩原 英 (@suguru1989) on CodePen.dark

align-itemsの値にflex-startを記載すると、親要素内のトップにコンテンツを固定することができます。

 

align-items: flex-end;

See the Pen RwWpaZP by 萩原 英 (@suguru1989) on CodePen.dark

align-itemsの値にflex-endを記載すると、親要素内の下辺にコンテンツを固定することができます。

 

flex-boxプロパティその4:flex-grow,flex-shrink(子要素の個別の大きさを決める)

 

flex-grow

flex-growは他のコンテンツと大きさの割合を比例させて、個別のコンテンツの大きさを決めることができます。

See the Pen JjYWXvQ by 萩原 英 (@suguru1989) on CodePen.dark

上の例ではコンテンツ1やコンテンツ3に対しコンテンツ2が5倍大きくなっています。

 

flex-shrink

flex-shrinkは他のコンテンツと大きさの割合を比例させて、個別のコンテンツの縮み具合を決めることができます。

See the Pen zYvZqMb by 萩原 英 (@suguru1989) on CodePen.dark

コンテンツ2をflex-shrink: 0;にすることで縮小させないように設定しています。デフォルト値はflex-shrink: 1;です。上の例のコンテンツ2をデフォルトの0にすると、全て同じ幅になります。

 

flex-basis

flex-basisは個別のコンテンツの始めの大きさを決める際に使用します。

See the Pen bGVqebL by 萩原 英 (@suguru1989) on CodePen.dark

コンテンツ1とコンテンツ3は75pxとなっており、コンテンツ2だけ150pxとなっています。

 

flex-boxプロパティその5:order,align-self(子要素の個別の順序・位置を決める)

 

order

orderはコンテンツの順番を個別に設定することができます。

See the Pen PoPpNoq by 萩原 英 (@suguru1989) on CodePen.dark

 

となっています。

 

align-self

align-selfはalign-itemsの個別バーションといった方がわかりやすいかもしれません。

垂直方向に対する位置をコンテンツごとに設定することができるプロパティです。

See the Pen NWGpNQy by 萩原 英 (@suguru1989) on CodePen.dark

 

となってます。

 

 

まとめ

いかがだったでしょうか。

今やレイアウトを語る上では欠かせない存在となったflex-box。

この便利な技術を使わない手はありません。

ぜひ、flex-boxをマスターし、web制作に活かしてもらえたらと思います。