横幅の異なる要素を含むflexを綺麗に配置したいです

Question

実現したいこと

p要素の横幅はそれぞれ異なります。
p要素の横幅に関わらず、左の四角形とbuttonの位置を固定にしたいです。

<li>
<i>四角形</i>
<p>横幅がそれぞれ異なります</p>
<button>button</button>
</li>

Answer 1

幅を固定値にせずに、p要素の横幅の最大値に合わせたいということなら、下記でどうでしょうか。

ul {
  display: inline-block; /* ここがポイント */
}
li {
  display: flex;
  align-items: center;
  width: 100%;
}
li p {
  flex: 1 0 0%;
}
li i {
  border: 2px solid gray;
}

Comments

[退会済みユーザー]

ありがとうございます。

Answer 2

このような形でいかがでしょうか?

ul {
  display: block;
  width: 500px; /* 好きな横幅 */
}
li {
  display: flex;
  align-items: baseline;
  width: 100%;
}
li p {
  flex: 1 1 0%;
}

Comments

[退会済みユーザー]

ありがとうございます

Answer 3

widthとflex-growでそれっぽくなりましたが、これでいいのか分かりません