flexで横並びにした先頭の子要素を、丁度中央に配置したいです。

Question

実現したいこと

<div class="flex">
  <div class="center">先頭かつ中央</div>
  <div>item2</div>
  <div>item3</div>
</div>

クラスcenterを画面の丁度ど真ん中に配置したいです。

理想と現実

理想は以下のような感じです。「|」を画面の端とします。
| center item2 item3 |

ですが実際にはcenterが右に寄ってしまいました。
| center item2 item3 |

試してみたこと

見方を変えれば右揃えにしたいということなので、justify-content: flex-end;を指定してみました。

18:30追記

子要素item2とitem3を子要素で囲み、flexとwidth:50%を指定してみた所、一応それらしくなりました。ですが以下のようなHTML構造になってしまいました。

<div class="flex">
  <div class="center">先頭かつ中央</div>
  <div class="flex-wrap">
    <div>item2</div>
    <div>item3</div>
  </div>
</div>

解決はできましたが、HTML構造を変えないなど、他にいい方法があるような気がします。もしあればよろしくお願いします。

Answer 1

HTML側を変えずに、display: flex;を使うと「丁度中央に配置」だとこのような形になると思います。
(横幅が変わるたびに変更しないといけないのでいまいちな感じはしますが..)

↓右にも余白がほしいなら

.flex {
  display: flex;
}
.flex > * {
  margin-left: auto;
  margin-right: auto;
}
.flex > .center {
  /* 「先頭かつ中央」が6文字なので半分の「3em」 */
  margin-left: calc(50% - 3em);
}

↓右にくっつけたいなら

.flex {
  display: flex;
}
.flex > * {
  margin-left: auto;
}
.flex > .center {
  /* 「先頭かつ中央」が6文字なので半分の「3em」 */
  margin-left: calc(50% - 3em);
}

.centerにposition: absolute;を指定する方法もあるとは思います。

Comments

[退会済みユーザー]

二つ質問させてください。
・margin-leftとmargin-rightにautoを指定していますが、これは何を目的に設定しているのですか？
・「先頭かつ中央」が6文字なので3emとありますが、これは文字数によって変更していく、という事で合っていますか?

[new1ro]

> ・margin-leftとmargin-rightにautoを指定していますが、これは何を目的に設定しているのですか？
右側に余白を生じさせるための記述です。不要であれば消してください。
(消したものが「右にくっつけたいなら 」のソースコードです。)

> ・「先頭かつ中央」が6文字なので3emとありますが、これは文字数によって変更していく、という事で合っていますか?
合っています。7文字の場合は「3.5em」もしくは「calc(7em / 2)」です。
他に方法があるかもしれませんが、
「HTML構造を変更しない」ならこのような形しか思いつきませんでした。

[退会済みユーザー]

ありがとうございます！！