0
0

More than 3 years have passed since last update.

[HTML/CSS]justify-contentの種類について

Posted at

はじめに

本記事では、justify-contentの種類を記述していきます。
間違えまくり&覚えきれない箇所でしたので備忘録です。

justify-contentとは

display: flex;と併せて使用します。
主軸方向(初期値は水平方向)の配置の詳細を決めます。

種類(学習したもの)

・justify-content: flex-start; 左寄せ
flex-start.png

・justify-content: flex-end; 右寄せ
flex-end.png

・justify-content: center; 中央寄せ
center.png

・justify-content: space-between; 両端が左右に寄り、等間隔
spece-between.png

・justify-content: space-around; 両端が左右に寄り、等間隔。両端の余白と要素間の余白が1:2
spece-around.png

終わり

CSSのコードを書いていて「楽しいな」と感じるときが多いです。
「space-between」と「space-around」は少し似ているとは感じますが、
実際にデザインを考える上で、
細かいところも重要になるだろうと思いました!!

どんどんCSSも書けるよう、がんばります!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0