dt,ddがはみ出ます。flexdirection:column,flexwrap:wrapについて。

Question

現在コーポレートサイトの模写を行っています。
会社情報をdl,dt,ddタグを使って書いており、pc表示ではdt,ddタグをflexboxで横並び＆flex-wrap:wrapでそれぞれの項目ごとに改行されるよう調整、スマホ表示の際はflex-direction:columnを指定し縦並びになるようにしています。

<section id="company" class="wrapper">
      <div class="about-company">
        <h2 class="flex-title">
          <span class="title-en">COMPANY</span>
          <span class="title-ja">会社情報</span>
        </h2>

        <dl>
          <dt>会社名</dt>
          <dd>ウェブエンターテインメントデザイン株式会社</dd>
          <dt>所在地</dt>
          <dd>東京都渋谷区桜丘町99-9 West Building 3F</dd>
          <dt>代表</dt>
          <dd>xxxxxx</dd>
          <dt>設立</dt>
          <dd>2021年1月1日</dd>
          <dt>資本金</dt>
          <dd>3,000,000円</dd>
          <dt>事業内容</dt>
          <dd>Web制作・マーケティング</dd>
          <dd class="add">インターネットメディア事業</dd>
          <dd class="add">プロモーション企画・制作</dd>
          <dd class="add">ソーシャル企画・運営</dd>
        </dl>
      </div>

      <div class="company-img">
        <img src="img/company.jpg" alt="">
      </div>
    </section>

.wrapper {
  width: 100%;
  max-width: 1032px;
  padding: 0 16px;
  margin: 0 auto;
}

#company {
  position: relative;
  display: flex;
  align-items: center;
  height: 750px;
}

#company .about-company { 
  background-color: #fff;
  position: absolute;
  width: 55%;
  top: 0;
  left: 0;
  padding: 100px 8% 100px 6%;
}

#company .company-img {
  position: absolute;
  /* height: 400px; */
  width: 53%;
  top: 115px;
  right: 0;
}

#company .company-img img {
  height: 400px;
  width: 100%;
  object-fit: cover; 
}

#company .about-company dl {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  align-items: center;
}

#company .about-company dt {
  width: 20%;
  margin-top: 10px;
}

#company .about-company dt:first-of-type {
  margin-top: 0;
}

#company .about-company dd {
  width: 80%;
  margin-top: 10px;
}

#company .about-company dd:first-of-type {
  margin-top: 0;
}

#company .about-company .add {
  margin-left: 20%;
}

@media (max-width: 900px) {

#company .about-company { 
    /* background-color: #fff; */
    position: static;
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 20px;
  }
  
  #company .company-img {
    position: static;
    /* height: 400px; */
    width: 100%;
    padding: 0;
    /* top: 0px; */
    /* right: 0px; */
  }

  #company {
    position: static;
    flex-direction: column;
    /* align-items: center; */
    height: auto;
  }

  #company .about-company dl {
    flex-direction: column;
    /* align-items: flex-start; */
  }

  #company .about-company dt {
    width: 100%;
    margin-top: 20px;
  }

  #company .about-company dd {
    width: 100%;
    margin-top: 5px;
    padding-left: 14px;
  }

  #company .about-company dd:first-of-type {
    margin-top: 5px;
  }

  #company .about-company .add {
    margin-left: 0;
  }

｝

スマホ表示部分のコーディングを行っている時、
columnにした後dt,ddのwidthを100％に指定すると、dlの幅からdt,ddが右側にはみ出てしまいました。
確認したところ、pc表示の方で入れていた、最後のdd（class名.add）につけている

#company .about-company .add {
  margin-left: 20%;
}

が原因のようで、スマホ表示の方で

#company .about-company .add {
  margin-left: 0;
  }

を入れると改善されました。

なぜ最後の3つのddにmargin-leftがついているだけなのに、一番上からの全てのdt,ddに影響を与えたのでしょうか？
最後の3つの部分だけはみ出すのはなんとなく分かるのですが、すべてがはみ出す状態が理解できません・・

ちなみにpc表示の方でflex-wrap:wrap;と指定している状態はスマホ表示でもそのまま生かしており、これを消してみると最後の3つだけがはみ出している状態になりました。

flex-direction:columnにしている状態も関係しているのかな？とは思うのですが、なかなか理解が追い付きません。

理由をご説明いただけると助かります。よろしくお願いいたします。

Answer 1

僕も気になったので調べてみました。多分次のような感じだと思います。

なぜ最後の3つのddにmargin-leftがついているだけなのに、一番上からの全てのdt,ddに影響を与えたのでしょうか？
最後の3つの部分だけはみ出すのはなんとなく分かるのですが、すべてがはみ出す状態が理解できません・・

CODEPENで調べたところ、どうやら<dl>タグのスタイルでalign-items: centerを指定していることがこの問題の要因のようです。ここを例えばコメントアウトされているalign-items: flex-startに変更すると最後の3つの、addクラスがついている<dd>のmarginを変えても他の要素が動くことはないです。

じゃあなぜこんなことになったのか？

こちらによると、align-items: centerの説明はこう書かれています。

フレックスアイテムのマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。

なるほど、よくわからない;;交差軸とはなんでしょう？これも調べてみました。こちらに書いていました。図を見ればわかりやすいですが、今回flex-directionをcolumnにしているのでリンクのサイトの下の方の画像と同じなので今回は水平方向の線が交差軸と言えますね。

そして、「cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します」のところ、多分cross-sizeは交差軸長さを表しているのだと思います。多分図のようなイメージだと思います。

ここまで踏まえた上で、今回の問題に戻りましょう。今回、最後の3つの<dd>にaddクラスをつけました。これにより、cross-sizeは少し広くなってしまいます（ついでにいうとflexコンテナからもはみ出します)。cross-sizeが広くなると、軸の中心が少しずれるのでalign-item: centerによって他の要素もそれに合わせて動いてしまっているというのが真相だと思います。

図で書くと↓のような現象が起こっているのだと思います。

Comments

[pckuma]

ご回答ありがとうございます！
図まで記載していただいて、とても分かりやすいでした！

＞cross-sizeが広くなると、軸の中心が少しずれるのでalign-item: centerによって他の要素もそれに合わせて動いてしまっているというのが真相だと思います。

軸の中心がずれるという認識がありませんでした。

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