３つの要素を左、中央、右に詰める。display: flex が適用されない

Question

// sample.htmlのbody
<div class="title_btn">
  <form action=.. class="pre_form">
    <input type="hidden" value=..?>
    <input type="hidden" value=..?>
    <button type="submit" class="change_btn pre_btn">Pre</button>
  </form>

  <p class="show_title">Title</p>

  <form action=.. class="next_form">
    <input type="hidden" value=..?>
    <input type="hidden" value=..?>
    <button type="submit" class="change_btn next_btn">Next</button>
  </form>
</div>

// sample.css
*{
  margin: 0;
  padding: 0;
}
.title_show{
  width: 100%;
}
.change_btn{
  display: inline-block;
}

目的としては右端にPreボタンを、左端にNextボタンを、中央にTitleのテキストを持ってきたい。
初歩的なところですが、助言をいただけると助かります。

Answer 1

フレックスレイアウトを使った方がいいと思います。インラインブロックやフロートで横並びにするのは地雷です。

.title_btn {
	display: flex;
	justify-content: space-between;
}

Comments

[hima-mura.]

ご指摘通りにコードを書き換えたところ。要素が横並びではなく縦並びになってしまうのですが、なにか心当たりはありますか？

[Lhankor_Mhy]

既存のCSSは消してください。

[hima-mura.]

もちろん消しましたが、縦並びのままです。
formには適用されないとか他の要因があるようです。いくらか調べましたが要因が思い当たりません。

[Lhankor_Mhy]

ご提示のコードと回答のコードでサンプルを作りました。

https://jsfiddle.net/Lhankor_Mhy/d2gn4qfz/

上記ページでも、hima-mura.さんの環境では縦に並んで見えますか？

縦に並んで見えるのであれば、環境の問題かと思います。
横に並んで見えるのであれば、ご提示いただいていない部分に原因があると思われます。

[hima-mura.]

Lhankor_Mhyさんのリンク先では、横並びで思い通りの挙動で処理されていました。
わざわざありがとうございます。

[Lhankor_Mhy]

お役に立てたようで何よりです。