CSS3のflexboxで、位置の指定について

Question

<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;

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

Answer 1

CSS3のflexboxは、子要素を横並びとか、縦並びとか相対的にレイアウトするものです。
絶対位置指定とは相容れないものです。

絶対位置指定するなら、position: absolute;とposition: relative;を使います。

.abc {
  list-style: none;
  position: relative;
}

.one {
  width:50px;
  height:60px;
  position: absolute;
  left: 50px;
  top: 130px;
}

.two {
  width:70px;
  height:80px;
  position: absolute;
  left: 130px;
  top: 10px;
}

.three {
  width:80px;
  height:100px;
  position: absolute;
  left: 250px;
  top: 50px;
}