本記事では、displya:flexで横並びにした要素に対して均等に余白を設ける方法について解説しています。
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
| 著者 | Mana |
|---|---|
| 発売日 | 2019/3/16 |
| ページ数 | 280ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (2,167件) |
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
均等に余白を設ける2つの方法
先輩！均等に余白を設けるにはどうすればいいんですか？
2つの方法があるから、別々に紹介するね！個人的に1つ目に紹介するjustify-conentプロパティを使う方法がオススメだよ！
justify-conentプロパティで調整する
1つ目は、justify-conentプロパティを使った方法です。余白を設定できる値は3つあるため、最適な値を選びましょう。
.flex {
display: flex;
/* 3つの中から1つを選択 */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}
背景色のグレーは設定した時に出る余白を表しているよ！
marginプロパティで調整する
2つ目は、marginプロパティで余白を設ける方法です。
CSSに慣れていない方だとフレックスアイテム全体に余白を付け、1番最初のアイテムだけ余白を0に戻すという書き方をしがちですが、隣接するクラスに適用させる「+」のワイルドカードを使うことで簡潔に記述することが出来ます。
/*
.flex：親要素(flexコンテナ)
.flex：子要素(flexアイテム)
*/
.flex {
display: flex;
}
.flex > .flex__item + .flex__item {
margin-left: 30px;
}
中央寄せしてから均等に余白を設けたい場合は、親要素に「justify-content: center;」を追加します！
DMM WEBCAMP 
CodeCamp 
TechAcademy 
