お世話になっております。
align-itemsの使い方について調べていたら、いくつかの本やサイトではflexアイテムの縦方向を決めるとあります。これが正解なように思えます。
しかし、HTML&CSS全辞典という本では、
「align-itemsプロパティは、配置されるすべてのボックスに対して既定となるalign-selfプロパティの値を定義します。」
と書いてあり、さらに「適用される要素」は「すべての要素」と書いてあります。
これって、本が間違いですよね?
詳しい方がいらっしゃいましたらよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは
align-itemsはフレックスレイアウトに限定した指定ではありません。
ボックスレイアウトでも同様の意味合いで使われます。
また、正確には「縦方向」ではなく、「交叉軸方向」です。
横を主軸としたレイアウトでは「縦方向」の意味になりますが、縦を主軸にしたレイアウトでは「横方向」を示すことになります。
>これって、本が間違いですよね?
少し一般化した記述になっていますが、正しいと思いますよ。
「すべての要素」は文脈から判断できる表現になっているものと想像しますが、正確には「すべての(レイアウトの対象になる)直接の子要素」の意味ですね。
個別の要素を指定する「align-self」に対して、「すべての要素」という意味合いですね。
https://developer.mozilla.org/ja/docs/Web/CSS/al …
ご回答ありがとうございます。
私の知識不足でfujillin様のご回答もよく理解できない状態です。
恥ずかしいですね。
まあ、本が間違えていないということが分かりましたので、それだけでもよかったです。
CSSとかできる人ってすごいと思います。
ご回答ありがとうございました。
No.3
- 回答日時:
本が正しいです。
フレックスボックスの場合は主軸が行の場合は、交差軸である縦方向のアイテムの配置を制御、主軸が列の場合は、交差軸である横方向のアイテムの配置を制御。
いくつかの本やサイトは、主軸が行の場合の事を1例として言ってるに過ぎません。
flex-directionがrowまたはrow-reverseの場合に限ります。
主軸が列、つまりflex-directionがrcolumnまたはcolumn-reverseの場合には横方向の配置を制御。
ご回答ありがとうございました。
ssawatake様のご回答がよく理解できないほど私の知識は未熟です。
お恥ずかしい限りですが、本が間違えていないことが分かればそれだけでも質問した価値がありました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
含む含まないという概念自体の...
-
質問1.
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
NからZへの全単射を具体的に構...
-
VBA でIE 操作 ボタンをクリッ...
-
HTMLページ上でiframeを最前面...
-
改行ほどは行かないけど、若干...
-
textareaの幅を画面と合わせたい
-
input type="hidden"で取得した...
-
brタグ、pタグやtableタグが非...
-
textareaにタグを挿入したい。
-
現行の日本国憲法の古い所を教...
-
imgタグをそのまま使うことは正...
-
シュタイナー学校・宗教との関連性
-
aタグの中にdivタグを入れる場...
-
HTML_QUICKFORMのSELECTにデフ...
-
HTMLで <p>~</p>内で2回以...
-
初歩的な質問です。<div>のwidt...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
現行の日本国憲法の古い所を教...
-
質問1.
-
このサイトのカテゴリのチェッ...
-
改行ほどは行かないけど、若干...
-
「諸要素」とはどういう意味で...
-
CSSで改行後の行間調整
-
NからZへの全単射を具体的に構...
-
html タグの閉じスラッシュ前の...
-
ある要素の中身を全部グレーア...
-
input type="hidden"で取得した...
-
textareaの幅を画面と合わせたい
-
角丸画像の背景色を透明にした...
-
テキストボックスの中にリンク...
-
CSSのa:hoverが急に一部だけ効...
-
H1タグを画像にしたい
-
HTMLでTextareaを横に2つ並べ...
-
imgタグをそのまま使うことは正...
おすすめ情報