ログイン
問題13

要素を中央に寄せてみよう

CSSでフレックスボックスを使って要素を中央に寄せる場合は、justify-contentとalign-itemsというプロパティを使用します。margin 0 autoやtext-alignとの違いをしっかり理解していきましょう。

アイコン画像

本のアイコンjustify-contentとは

justify-contentとは、flexアイテムの配置設定を行なうCSSのプロパティです。
フレックスボックス(display:flex)を指定した親要素に対する子要素のことをflexアイテムと呼びます。
すなわち、display:flexが指定されていない状態でjustify-contentを使って配置設定を行なうことはできません。
2つが揃わないと機能しないプロパティなのでセットで覚えておきましょう。

justify-contentプロパティの初期値は左寄せ(flex-start)になっており、指定できる値には、
flex-end(右寄せ)、center(中央寄せ)、space-between(flexアイテムの両端揃え)など他にもいくつかの配置を指定する値が用意されています。

justify-contentの余白は、主軸となる方向につけられます。display:flexを指定している場合、基本的には横方向が主軸となりますが、flex-direction(並ぶ方向を指定するプロパティ)が指定されいる場合などは縦が主軸になることもあります。

本のアイコンalign-itemsとは

align-itemsとは、flexアイテムの縦軸の配置を調整するCSSのプロパティです。
上下のどこで揃えるのかを指定できます。
このプロパティもdisplay:flexが指定されていないと機能しませんので注意しましょう。

具体的な値には、flex-start(上揃え)、flex-end(下揃え)、center(中央揃え)などがあります。
他にも要素の伸縮やテキストの位置を基準とした指定も可能です。

大きさの違う画像を並べるときや、flexアイテムの中にテキストがあるときなど便利なので、使いこなせるようにしておきましょう。

CSSの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。

問題13:要素を中央に寄せてみよう

用意されている黒のボックスを青のボックスの中央に寄せてみましょう。

エディターのアイコンあらかじめエディタに書くコード

                <div class="boxs">
  <div class="box"></div>
</div>
¥HTML¥
              
                .boxs {
  width: 300px;
  height: 300px;
  background: blue;
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background: black;
}
¥CSS¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              .boxs {
  width: 300px;
  height: 300px;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
}
¥CSS¥
            

コメントのアイコン解説

要素を中央に持ってくるにはjustify-contentとalign-itemsを使用します。
「justify-content」は左右の間隔を揃えるプロパティ
「align-items」は上下の間隔を揃えるプロパティです。

今回は中央に寄せる問題だったので両方にcenterを指定しましたが、
値の種類には左に詰めて配置するflex-startや複数の要素を等間隔に空けるspace-around等が用意されています。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!