
みなさん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
- コンテンツ1が2番目
- コンテンツ2が5番目
- コンテンツ3が6番目
- コンテンツ4が1番目
- コンテンツ5が3番目
- コンテンツ6が4番目
となっています。
align-self
align-selfはalign-itemsの個別バーションといった方がわかりやすいかもしれません。
垂直方向に対する位置をコンテンツごとに設定することができるプロパティです。
See the Pen NWGpNQy by 萩原 英 (@suguru1989) on CodePen.dark
- コンテンツ1がcenter
- コンテンツ2がflex-start
- コンテンツ3がflex-end
- コンテンツ4がデフォルト値
となってます。
まとめ
いかがだったでしょうか。
今やレイアウトを語る上では欠かせない存在となったflex-box。
この便利な技術を使わない手はありません。
ぜひ、flex-boxをマスターし、web制作に活かしてもらえたらと思います。