質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

4284閲覧

flex-direction:column; align-items:center; で要素が中央寄せになる理由

niconic73027793

総合スコア215

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2021/10/04 23:12

編集2021/10/04 23:24

CSS の flex レイアウトの学習をしています。

ヘッダーコーディング学習の記事

で、

html が

<div class="header"> <div class="header__inner"> <img class="header__logo" src="https://placehold.jp/bbbbbb/ffffff/100x35.png?text=LOGO"> <div class="header__navgroup"> <div class="header__navitem">TOP</div> <div class="header__navitem">ABOUT</div> <div class="header__navitem">BLOG</div> <div class="header__navitem">CONTACT</div> </div> </div> </div>

css が

.header{ margin-top: 20px; position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: #333; display: flex; flex-direction: column; align-items: center; } .header__inner{ max-width: 1152px; width: 90%; height: 100%; display: flex; justify-content: flex-start; align-items: center; } .header__logo{ flex: none; width: auto; height: 35px; } .header__navgroup{ margin-left: auto; display: flex; flex: none; } .header__navgroup > * + *{ margin-left: 60px; } .header__navitem{ font-size: 16px; color: #fff; }

このようにのっていました。

display: flex;
flex-direction: column;
align-items: center;

の記述のように書くと中央に要素がきます。

なぜ中央にくるのでしょうか?

margin:0 auto; や

display: flex;
justify-content: center;

と同じ事でしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

align-items - CSS: カスケーディングスタイルシート | MDN

CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します

上記に説明されている通りですが、ちょっと分かりにくいですね。
align-items は、子要素を交差軸方向の配置を制御するものです。
交差軸方向とは、flex-direction で指定した並べる方向(主軸)と交差する方向ということです。
flex-direction: row で水平方向で並べたら、align-itemsは垂直方向の配置を制御します。
flex-direction: column で垂直方向で並べたら、align-itemsは水平方向の配置を制御します。
今回は flex-direction: column を設定してますので、水平方向の配置を制御することになります。
よって align-items: center; は水平方向で中央に配置されます。

WEBでは、ちょくちょくalign-itemsは垂直方向の配置を制御すると説明していることがありますが、正確ではないですね。

ただ、ちょっとトリッキーな設定ですね。普通に、下記のように設定したほうが分かりやすいと思います。

css

1 flex-direction: row; 2 justify-content: center;

justify-content は主軸方向の配置を制御します。今回は、子要素は一つだけですので、どちらも同じことになります。

まあ、中央寄せだけが目的なら、自分なら、子要素に下記の設定にします。

css

1 margin: 0 auto;

投稿2021/10/04 23:43

編集2021/10/04 23:54
hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問