CSSのflexで中央揃えにする方法【初心者向け】
初心者向けにCSSのflexで中央揃えにする方法について解説しています。flexboxはCSS3から追加されたレイアウト用のモジュールで、要素を簡単に揃えたりすることが出来ます。今回はflexを使って中央揃えにする書き方を見てみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSのflexで中央揃えにする方法について解説します。flexboxはCSS3から追加されたレイアウト用のモジュールです。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
CSSのflexで中央揃えにする方法について詳しく説明していくね！
お願いします！
flexboxで中央揃えにする方法
flexboxは、要素を横並びにする時にはとっても便利なプロパティですよね。
商品一覧に、記事詳細に、使えるシーンにはキリがありません。
なんとなく要素を左詰めで使える、と言うイメージがある方もいるかともいますが、実は、中央揃えで均等に並べていく方法もあります。
横いっぱいの、全体的に中央揃えなデザインで大活躍しそうですね。
適用方法はいたって簡単でdisplay: flex; を指定したクラスに、justify-content: center; を追加します。たったこれだけです。
実際に書いてみよう
さらに、flex-wrap: wrap;をつければ、こんな風に、中央寄せのまま下に落ちてくれます。
HTML
<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
CSS
.container{
display: flex;
justify-content: center;
background: #ccc;
flex-wrap: wrap;
}
.box{
width: 200px;
height: 200px;
margin: 10px;
background-color: #66b6d5;
}
補足事項
| この記事を監修してくれた方
和田 祥子（わださちこ） テニスと音楽とビールが好きです。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
