align-itemsの使い方。本が間違っている？

お世話になっております。
align-itemsの使い方について調べていたら、いくつかの本やサイトではflexアイテムの縦方向を決めるとあります。これが正解なように思えます。

しかし、HTML&CSS全辞典という本では、
「align-itemsプロパティは、配置されるすべてのボックスに対して既定となるalign-selfプロパティの値を定義します。」
と書いてあり、さらに「適用される要素」は「すべての要素」と書いてあります。

これって、本が間違いですよね？
詳しい方がいらっしゃいましたらよろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/09/20 12:28

こんにちは

align-itemsはフレックスレイアウトに限定した指定ではありません。
ボックスレイアウトでも同様の意味合いで使われます。

また、正確には「縦方向」ではなく、「交叉軸方向」です。
横を主軸としたレイアウトでは「縦方向」の意味になりますが、縦を主軸にしたレイアウトでは「横方向」を示すことになります。

＞これって、本が間違いですよね？
少し一般化した記述になっていますが、正しいと思いますよ。
「すべての要素」は文脈から判断できる表現になっているものと想像しますが、正確には「すべての（レイアウトの対象になる）直接の子要素」の意味ですね。
個別の要素を指定する「align-self」に対して、「すべての要素」という意味合いですね。

https://developer.mozilla.org/ja/docs/Web/CSS/al …

この回答へのお礼

ご回答ありがとうございます。

私の知識不足でfujillin様のご回答もよく理解できない状態です。
恥ずかしいですね。
まあ、本が間違えていないということが分かりましたので、それだけでもよかったです。

CSSとかできる人ってすごいと思います。
ご回答ありがとうございました。

お礼日時：2023/09/20 21:42

No.3 回答者： ssawatake 回答日時： 2023/09/20 13:25

本が正しいです。

フレックスボックスの場合は主軸が行の場合は、交差軸である縦方向のアイテムの配置を制御、主軸が列の場合は、交差軸である横方向のアイテムの配置を制御。

いくつかの本やサイトは、主軸が行の場合の事を1例として言ってるに過ぎません。
flex-directionがrowまたはrow-reverseの場合に限ります。

主軸が列、つまりflex-directionがrcolumnまたはcolumn-reverseの場合には横方向の配置を制御。

この回答へのお礼

ご回答ありがとうございました。
ssawatake様のご回答がよく理解できないほど私の知識は未熟です。

お恥ずかしい限りですが、本が間違えていないことが分かればそれだけでも質問した価値がありました。

ありがとうございました。

お礼日時：2023/09/20 21:45

No.2 回答者： fujillin 回答日時： 2023/09/20 12:35

No1です。

連投失礼。
　「ボックスレイアウト」⇒「グリッドレイアウト」
でしたね。
訂正しておきます。