CSS3のflexboxで、絶対位置を指定できるか

flexboxの使い方を学んでいるのですが、いまいちわかっていません。

<ul class="abc">
<li class="one">今週のメニュー</li>
<li class="two">ハンバーグ</li>
<li class="three">目玉焼き</li>
</ul>

.abc {
display:flex;
flex-direction:row;
}

.one {
width:50px;
height:60px;
}

.two {
width:70px;
height:80px;
}

.three {
width:80px;
height:100px;
}

というコードがあったとします。
これに絶対位置をX座標、Y座標の順に与えます。
one:50,130;
two:130,10;
three:250,50;

このコードを上記の絶対値で、表示するには、どのようなコードを書けばよろしいでしょうか。

No.1 回答者： fujillin 回答日時： 2020/12/09 08:56

こんにちは

それぞれに適切なmarginを指定することで、似たようなレイアウトにすることは可能です。

とは言え、flexレイアウト自体が絶対位置でレイアウトするものではないので、例えば、親要素の幅が小さくなったりした場合に、子要素の幅が調整されるので（marginは確保されていても）絶対位置はずれてきます。

絶対位置を優先したいのであれば、position:absoluteを利用するのが妥当ではないでしょうか？