Flexbox Froggyをやっていまして、わからない箇所があります。

Question

表題についてですが、
orderプロパティを使用して、図にある黄色と赤のカエルの配置を変えたいと考えています。
コードの書き方がわからず検索しましたが、あまり類似例がなかったので、質問させていただきました。

何卒宜しくお願い致します。

Answer 1

#pond {
  display: flex;
}

.yellow {
  order: 1;　/* 1以上の数 */
}

参考：flexboxチートシート
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

追記：すいません、回答が間違っていたので修正です。
orderの初期値は0なので、1以上であればとりあえず右端に寄ります。
orderには負の数も適用でき、-1以下を指定すると逆に左に寄るのが分かると思います。
つまりorderの数字が小さいものから大きいものにかけて左から順番に並んでいきます。
・例 → https://jsfiddle.net/35cowkja/

Comments

[sasamiwarabi]

回答ありがとうございます。　ゲームの方はクリアできました。　もうちょい道理ついてしっかり勉強させていただきます。

Answer 2

初期値が0なのでそれより大きければ後ろへ、マイナスなら最初のほうへ配置されます。
3個だからわかりにくいのでしょうか？

   <div id="S1">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
   </div>

#S1 {
  display: flex;
  justify-content: space-around;
}

[class^="c"]:before {
  content: attr(class);
}

.c2 {
  order: 1;
}

.c4 {
  order: 1;
}

実際に変更して試してみてください。

MDN にもデモがあります
https://developer.mozilla.org/ja/docs/Web/CSS/order

Comments

[sasamiwarabi]

回答ありがとうございました。　早速デモで学習してみます。