display: flex;を使っていると横並びにしたリストやメニューなど、均等に配置したい場合があるかと思います。
そんな時にいちいち横幅設定するのも面倒です。今回は均等幅で配置する方法と余白設定について解説していきますので、しっかりと覚えてください。
display: flex;とは
display: flex;とは、指定した要素の子要素に対する表示方法を示すプロパティ+値です。
よくFlexbox(フレックスボックス)とかフレキシブルボックスとか言われていて、今は馴染みのあるプロパティかとも思います。
今回はこのFlexboxを使った要素の均等幅での配置と余白設定についてと実際の使用例も合わせて解説していきます。
横並びと均等配置について
まずは要素を横並びにする方法ですが、単純に横並びにしたいだけであれば、以下のように親要素にdisplay: flex;を指定するだけです。
<ul>
<li>子要素1</li>
<li>子要素2</li>
</ul>ul {
display: flex;
background-color: #F4F4F4;
}
li {
padding: 15px;
}
li:nth-child(1) {
background-color: #FCD;
}
li:nth-child(2) {
background-color: #DFC;
}- 子要素1
- 子要素2
上記のように、display: flex;を指定した要素の子要素が横並びになっています。
このままでは非常に使い勝手が悪いので、これを均等幅での配置にしてみます。均等幅で配置するにはCSSを以下のように変更します。
ul {
display: flex;
background-color: #F4F4F4;
}
li {
text-align: center;
flex: 1;
padding: 15px;
}
li:nth-child(1) {
background-color: #FCD;
}
li:nth-child(2) {
background-color: #DFC;
}- 子要素1
- 子要素2
このように子要素(今回の場合はli)に対してflex: 1;を指定すると均等幅での配置になります。
flexプロパティとは
flexプロパティとは、flex-grow、flex-shrink、flex-basisの3つのプロパティをまとめたショートハンド(省略形)です。
これらのflex-growとflex-shrinkに「1」、flex-basisに「0」を指定したものがflex: 1;となります。
今回は詳しくはふれませんが、後日詳しく解説していきます。
余白設定について
次に、Flexboxでの余白設定となります。
デザインによってはこのままではあまり汎用性もなく見難くなりますので、余白を入れていきます。Flexboxで余白を入れるにはgapプロパティを使用します。
ul {
display: flex;
gap: 20px; /* 追加した部分 */
background-color: #F4F4F4;
}- 子要素1
- 子要素2
上記のように、gapプロパティを指定しただけで余白を設定する事ができます。
下記で解説でしますが、gapプロパティを使うと要素同士の余白となりますので、無駄に下側や右側に余白付くことがありません。
gapプロパティとは
gapプロパティは、row-gapプロパティとcolumn-gapプロパティのショートハンド(省略形)となり。要素同士の上下左右の余白を指定出来ます。
例えば、gap: 20px;で上下左右の要素との余白を20pxずつ、gap: 20px 10px;で上下20px・左右10pxの余白となります。
今までだとmarginで指定し最後の要素だけmargin: 0;など指定する事が多かったと思います。
これだとレスポンシブ時に横並びの要素の数を変更する度にCSSを追加、といった作業が発生しましたが、gapプロパティだと要素と要素の余白になるのでカラム落ちや余計な手間が無くなるのでとても楽になります。
さいごに
いかがでしたでしょうか。
今回は、display: flex;の子要素を横並びで均等幅に配置する方法と余白設定について解説しました。
Flexboxを使用したレイアウトは非常に使い勝手がよく、かなり使用しますのでこの機会にしっかりと覚えておく事をオススメします。
