CSSのbox要素内で横並びの画像のwidthを縮小すると左寄せになってしまう

Question

CSSのbox要素内に配置した横並び画像で、要素幅100%に対してのwidthを縮小すると両要素内とも左寄せになってしまいます。

[□　][□　]
のように配置されているものを
[　□][□　]
という形にしたいです。

以下がCSSとHTMLです。

      .contents {
        width: 100%;
        margin: auto;
      }
      .flexbox {
        display: flex;
        align-items: flex-end;
      }
      .box > img {
        width: 50%;
        margin: 2px;
      }

    <div class="contents">
      <div class="flexbox">
        <div class="box">
          <img src="...">
        </div>
        <div class="box">
          <img src="...">
        </div>
      </div>
    </div>

正常に表示された場合、画像同士が隙間なく接するのを避けるために margin: 2px; を入れています。また、画像サイズは1053*1504の縦長のものが2枚です。
よろしくお願いします。

Comments

[recal]

cssはこれだけで再現できますか？
画像のサイズはいくつでしょうか。

>これを中央寄せにしたいです。
.box内でimgを左右中央寄せにしたいという事ですか？

[TOM830]

＞cssはこれだけで再現できますか？
すみません。.box > img{}が抜けていたので追記しました。
画像サイズは1053*1504の縦長のものが2枚並んでいます。

＞.box内でimgを左右中央寄せにしたいという事ですか？
その認識で合っています。

[recal]

.box{
text-align:center;
}
こうゆう事ですか？

[recal]

でも縮小しなくても左寄せなんですよね、いまいち再現しきれていないというか。。。

[TOM830]

そうですね...
書き方が悪かったです。すみません。

やりたいこととしては、display: flex;で横並びになってるboxの中にあるimgが以下のようになっているものを
[□　][□　]
↓
[　□][□　]
このようにしたいと思っています。

[recal]

なるほど、やっとわかりました。

Answer 1

こうゆう事でしょうか？

.flexbox {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.box{
  display:contents;
}
.box > img {
  width: 25%;
  margin: 2px;
}

Comments

[TOM830]

助かりました！ありがとうございました🙇‍♂️