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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

314閲覧

html css flexについて

yosiyosio

総合スコア12

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/01/21 05:52

html、cssでレイアウトの勉強をしているのですがflexの動作がよくわかりません。

例えば以下のようなコードがあります
body抜粋

html

1<body class="full-size"> 2 <div class="flex-container">・・・・・・1 3 <div class="margin-10">・・・・・・2 4 aaa 5 </div> 6 </div> 7</body>

css

1.full-size { 2 width:100%; 3 height:100%; 4} 5.flex-container { 6 -webkit-box-flex: 1; 7 -webkit-flex: 1 1 50%; 8 flex: 1 1 50%; 9 box-sizing: border-box; 10 max-width: 50%; 11 max-height: 100%; 12 -webkit-box-direction: normal; 13 -webkit-box-orient: vertical; 14 -webkit-flex-direction: column; 15 flex-direction: column; 16 display: flex; 17} 18.margin-top10 { 19 margin-top: 10%; 20}

ここからが質問なのですが、1の要素のflex-containerのmax-widthの%を増やすしていくと何故か2の要素でmargin-top: 10%と定義しているのにどんどんサイズが増えていきます。
なのでwidthを増やすと何故かどんどん縦のサイズも増えていってしまいます。
なぜでしょうか。

flex-containerのmax-width 50%の場合

flex-containerのmax-width 80%の場合
イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

【CSS で上下 margin のパーセント (%) 指定が上手く行かない原因 | かきしちカンパニー Web Magazine】
http://www.webmagazine.kakisiti.co.jp/?p=305

margin は親要素の幅を基準に決まります。
margin-top も margin-bottom も高さではなく、幅が基準です。

投稿2018/01/21 12:12

kei344

総合スコア69364

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

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

yosiyosio

2018/01/21 12:35 編集

ありがとうございました! marginは幅基準だったのですね勉強になりました。
guest

0

回答する前に言います。

クラス名が違っています。

<div class="margin-10">に対して、CSSが.margin-top10 {}になっています。 ↑ 「top」の文字が有り無しになっています。

ここで本題に入ります。

1の要素のflex-containerのmax-widthの%を増やすしていくと何故か2の要素でmargin-top: 10%と定義しているのにどんどんサイズが増えていきます。

なのでwidthを増やすと何故かどんどん縦のサイズも増えていってしまいます。
なぜでしょうか。

これは、%で指定しているため、親要素から承継されます。

.full-size {}が100%で、.flex-container {}が最大値50%だと、
.full-size {}の幅の50%の幅になります。
従って、.full-size {}はブラウザの幅一杯の同じなので、見た目はブラウザの幅50%になります。

.full-size {}と、.flex-container {}に別々の背景色をつ付けて、ブラウザの幅を縮めたりして見ると分かります。

投稿2018/01/21 12:20

amaryllis

総合スコア179

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

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

yosiyosio

2018/01/21 12:36

class間違いすみませんここに載せるときにミスりました・・・ marginは幅基準だということがわかりました! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問