2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CSS の justify と align の違い

Last updated at Posted at 2024-01-01

混乱したのでまとめました...

  1. Flexbox ... 1次元
    1.1. align-content ... 上下
    1.2. justify-content ... 左右
  2. Grid Layout ... 2次元
    2.1. align-items ... 上下
    2.2. justify-items ... 左右

flex-directioncolumn を指定すると以下のように変わるので注意してください(初期値は row)。自分はハマりました。

  1. Flexbox ... 1次元
    1.1. align-content ... 左右
    1.2. justify-content ... 上下

1. Flexbox と Grid Layout

1.1. Flexbox

ようするに一次元...

フレックスボックスの基本概念
フレキシブルボックスレイアウトモジュールは、 通常フレックスボックスと呼ばれ、一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。

1.2. Grid Layout

ようするに二次元...

グリッドレイアウトの基本概念
CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。

2. align と justfiy

2.1. align

上下の調整。align-items: center, align-content: center なら上下中央になる。

align
1.〔~を〕一直線[平行]にする[並べる]
2.〔部品などを〕調整する、調節する
3.〔大義や方針で~を〕同じ立場に置く、提携させる

3 の同じ立場に置くが上下のニュアンスがあるなと思いました。以下の図の EQUITY が align-items: center のイメージに近いのかなと思いました。

download.jpeg

あと alliance, 同盟とかも確かに対等な立場の意味合いがありそうな感じがします。以下はスターアライアンスのマークですが 傘連判状 みたいに円形のデザインになっています、上下関係の対等な同盟ということを意味したいのでしょうか...

Star_Alliance_Logo_bis_2011.svg.png

スターアライアンス は、1997年5月14日に設立された、世界初で世界最大の航空連合。 その加盟会社による就航国は190カ国余り、1,300以上の空港に達し、1日当たりの便数は21,000便を超える。アライアンス・スローガンは「The Way The Earth Connects」。

2.2. justify

左右の調整。justify-items: center, align-content: center なら左右中央になる。

justify
3.《編集》〔行の左端または右端を〕そろえる

天秤の左右の釣り合いのイメージから justify で左右中央なのでしょうか... いらすとや、なんでもあって笑ってしまう...

Screenshot from 2024-01-01 16-56-59.png

ギリシャ神話に登場する法の女神(正義の女神)、テミスの目隠しをしていない状態としている状態のイラストです。裁判所などによく像が飾られています。
テミスのイラスト

3. items と content

3.1. content

主に Flexbox に対して使用される...はず

なんで items は s がつくのに content は s がつかないんだよ〜、って思ったら通例単数形のみだそうです... 英語わからん... メリケン人の頭の中どうなってるんや...

content
1. 〔容器などの〕内容物、中身◆通例、contents
7. 《コ》コンテンツ、内容◆電子的に利用可能な情報・画像・映像など。◆【用法】通例、単数形のみ。

3.2. items

主に Grid Layout に対して使用される...はず

以下の中だと 3 番が一番近いんでしょうか... Flexbox で最も意味が近い content を使ってしまったから、Grid Layout ではつぎに意味がそれっぽい items を選んだみたいな感じだと思います。

item

  1. 〔一覧の中の〕項目、品目
  2. 〔法律などの〕条項、箇条
  3. 〔製造される〕品物、商品、製品
  4. 〔こまごました〕事柄、情報
2
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?