margin-rightが効かない理由が知りたい

Question

   <section class="section1">
      <div class="txt-wrap">
        <div class="h2-wrap">
          <h2>フィットネス<span>ダイエット目的</span></h2>
        </div>
      </div>
      <div class="img">
        <img class="main-img" src="img/img-index-01.jpg">
      </div>
    </section>

.section1 {
  display: flex;
  align-items: center;
  max-width: 1280px
}

.section1 .txt-wrap {
  flex: 0 1 50%;
  background: red;
  padding: 100px  0 150px 0;
/*  margin-right: -100px*/
}

.section1 .txt-wrap .h2-wrap {
  background: #fff;
  color: red;
  width: 98%;
  position: relative;
  z-index: 2;
  padding: 40px 20px
}
.section1 .img {
  flex: 0 1 50%;
  position: relative;
  z-index: 1;
  margin-left: -40px;
  margin-right:-100px
}

.section1 .img .main-img {
  width: 105%;
  box-shadow: 0 0 3px #ddd;
}

.section1 .img .sub-img {
  position: absolute;
  bottom: 20px;
  left: -10px;
  z-index: 2;
  width: 50%
}

.margin-righが正の値なら効いたのですが、いわゆる制限しすぎの状態なのでしょうか。しかしwidthは100%ではないので見当違いかなとも思います。だとしたらどこを変えればmargin-right-100pxが効くでしょうかがありますか。

Comments

[maisumakun]

具体的に、どのようなレイアウトを実現したいのでしょうか。

（ margin-right:-100pxが効いていたとしても、それが意図に沿ったレイアウトになるとも限りません）

Answer 1

もしかして、想定しているのは↓こういう感じで.imgがそのまま右にずれるようなことですか？

.section1 .img {
  flex: 0 1 50%;
  position: relative;
  z-index: 1;
  margin-left: auto; /* 変更 */
  margin-right:-100px
}

Comments

[退会済みユーザー]

そうです。この通りにしたかったのですが、 margin-left: auto; にするとうまくいったのはどういう理由でしょうか。

[Lhankor_Mhy]

https://coliss.com/articles/build-websites/operation/css/css-flexbox-and-auto-margins.html
↑これが参考になると思いますよ。

margin-right: -100px;により、フレックスコンテナに100pxの余裕ができたため、margin-left: auto;がその余裕分だけ広がった、ということです。

[Lhankor_Mhy]

以前の質問でも気になっていたのですが、
margin-left に何も設定していない場合、0 が設定される、ということについて、うっかり抜けてしまうことが多いのではありませんか？

[退会済みユーザー]

はい、それは抜けています。margin:0になっているままで支障が出る（思った通りに動かないことが多い）ことに気づけていませんでした。

上の参考サイトの中で「FlexアイテムはFlexコンテナ内の余分なスペースを占有するために、自動的にマージンを拡張する」という部分がよくわからなかったのですが、flex出ない場合はなぜmargin:autoにしても効かないのでしょうか。余分なスペースがないということでしょうか。

[Lhankor_Mhy]

できると思いますが……
どのようなコードでできなかったのですか？

[退会済みユーザー]

もう一度自分でコードを作って調べてみます。

Answer 2

margin-right: -100px は効いていると思いますよ。
margin-right: 0 と設定したときと比べてみると、右横の img が 100px左にずれて txt-wrapに100px分重なってます。

marginが+なら txt-wrap と img の間に余白が空く。
marginが-なら txt-wrap に img が重なる形になります。

だとしたらどこを変えればmargin-right-100pxが効くでしょうかがありますか。

どのような状態になることを期待しているのでしょうか。

Comments

[退会済みユーザー]

margin-right: -100px は効いていると思いますよ。
margin-right: 0 と設定したときと比べてみると、右横の img が 100px左にずれて txt-wrapに100px分重なってます。

これはtxt-wrap煮付けた場合ではありませんか。imgにつけた時のマージンのことが聞きたいのですが。

[hatena19]

imgの方でしたか。
imgの右隣りに何もないから効いてないように見えるのでしょう。
右隣になにか要素を置いたら、それとimgは100px分重なります。

あるいは、 flex: 0 1 50%; を flex: 1 1 50%; として要素が拡張するようにすると100px分ウィンドウ外へはみ出すように拡大します。

[退会済みユーザー]

右に何も要素がなければ、margin-right自体は効いているけれども位置がずれない理由はどうしてでしょうか。

[hatena19]

flexで左寄せになっているからです。

[退会済みユーザー]

marginーleftを設定するとflexで左寄せになってるにも関わらず、しっかり余白ができるのはなぜでしょうか。正の値と負の値で余白を作るか重なるかの違い以外に何かルールがあるのでしょうか。

[hatena19]

左寄せとは、左端を基準に、要素が可能な限り左側に寄せられて、位置が決まるということです。
margin-leftは左側に余白を設定するので、その分、要素の位置は右にずれます。
margin-rightは右側に余白を設定しますので、その要素自体の位置には影響を与えません。
その要素の右側に要素があれば、その間に余白ができますので、右側の要素はその分右にずれます。

Answer 3

左寄せになっているのが、原因かと思うのですが、
.section1の付与された要素に、以下のプロパティを設定して、両端にフローティングするようにすれば良いかもです。

justify-content: space-between;

Comments

[退会済みユーザー]

なぜ左寄せになってるときかなっかったのでしょうか。左寄せにした分だけmargin-rightをつけただけなら効かないとは思いますが。−１００pxもつけていたのになぜなのでしょうか。お分かりでしたら教えていただきたいです。