こんにちは
HTML/CSS初心者の rudorufu1981 と申します！

今回は、よくCSSの練習サイトとして紹介されている
「CSSBattle」の最初の12問 Battle #1 - Pilot Battle
を流行りのFlexboxを使って解いてみました！
解答コードを紹介している人がググっても見つからなかったので、記事にしてみました！
Flexbox初心者の方の参考になれば嬉しいです！僕も初心者ですが

※本来のCSSBattleの楽しみ方はいかに短いコードにできるかですが、
今回はFlexboxの勉強のためにやったのでコード量は気にせずやっていきます。

今回は後編ということで、#7~#12 の6問を解いていきます。
よろしくお願いします！

記事リンク

Flexboxについての最低限の知識

【後編】 #7~#12

#7. Leafy Trail

画像が重なるのでもちろんtranslateで実装します！

解答コード

#7.html

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0B2429;
  }
  div {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 100px 0 100px 0;
  }
  #d1 {
    transform: translate(-50px);
    background: #1A4341;
  }
  #d2 {
    transform: translate(0);
    background: #998235;
  }
  #d3 {
    transform: translate(50px);
    background: #F3AC3C;
  } 
</style>

#8. Forking Crazy

12問の中で最難関の問題！
10px下にtranslateするのを思いつくかどうかの発想力の勝負な気がします・・・

解答コード

#8.html

<div class="conteiner">
  <div class="top">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="mid"></div>
  <div class="bot"></div>
</div>
<style>
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    background: #6592CF;
  }
  .conteiner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .top {
    display: flex;
  }
  .top > div {
    width: 20px;
    height: 100px;    
  }  
  .top > div:nth-child(odd) {
    border-radius: 10px 10px 0 0;
    background: #060F55;
  }
  .top > div:nth-child(even) {
    border-radius: 0 0 10px 10px;
    transform: translate(0, 10px);
    background: #6592CF;
  }
  .mid {
    width: 140px;
    height: 100px;
    border-radius: 0 0 70px 70px;
    background: #060F55;
  }
  .bot {
    width: 20px;
    height: 50px;
    background: #060F55;
  }
</style>

#9. Tesseract

Flexboxに慣れてきたら、もうこのくらいの問題は簡単！

解答コード

#9.html

<div id="d1"></div>
<div class="container">
  <div id="d2"></div>
  <div id="d3"></div>  
  <div id="d4"></div>
</div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #222730;
  }
  div {
    position: absolute;
  }
  #d1 {
    width: 400px;
    height: 150px;
    background: #4CAAB3;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(45deg);
  }
  #d2 {
    width: 250px;
    height: 250px;
    background: #222730;
  } 
  #d3 {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
  }
  #d4 {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50%;
  }
</style>

#10. Cloaked Spirits

勉強も兼ねて擬似要素を使って実装してみました！

解答コード

#10.html

<div class="container1">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container2">
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #62306D;
  }
  .container1 {
    height: 300px;
    display: flex;
    align-items: end;
    position: absolute;
  }
  .container1 > div:nth-child(odd) {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
  }
  .container1 > div:nth-child(even) {
    width: 100px;
    height: 200px;
    background: #F7EC7D;
  }
  .container2 {
    height: 200px;
    display: flex;
    position: absolute;
  }
  .container2 > div:nth-child(odd) {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    align-self: flex-end;
    position: relative;
    background: #AA445F;
  }
  .container2 > div:nth-child(odd)::after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    background: #E38F66;
  }
  .container2 > div:nth-child(even) {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    background: #E38F66;
  }
  .container2 > div:nth-child(even)::after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    background: #AA445F;
  }
</style>

#11. Eye of Sauron

伝家の宝刀translateで簡単！

解答コード

#11.html

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #191210;
  }
  div {
    position: absolute;
  }
  #d1 {
    width: 100px;
    height: 50px;
    border-radius: 0 0 100px 100px;
    transform: translate(-100px, 25px);
    background: #ECA03D;
  }
  #d2 {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    transform: translate(-100px, 0);
    background: #191210;
  }
  #d3 {
    width: 140px;
    height: 140px;
    border-radius: 100%;
    background: #ECA03D;
  }
  #d4 {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background: #191210;
  }
  #d5 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #84271C;
  }
  #d6 {
    width: 100px;
    height: 50px;
    border-radius: 100px 100px 0 0;
    transform: translate(100px, -25px);
    background: #ECA03D;
  }
  #d7 {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    transform: translate(100px, 0);
    background: #191210;
  }   
</style>

#12. Wiggly Moustache

こちらも伝家の宝刀(ry

解答コード

#12.html

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5D6B4;
  }
  div {
    position: absolute;
  }
  #d1 {
    width: 20px;
    height: 20px;  
    border-radius: 100%;
    transform: translate(-120px, 0); 
    background: #D86F45;
  }
  #d2 {
    width: 100px;
    height: 50px;
    border-radius: 0 0 100px 100px;
    transform: translate(-80px, 25px); 
    background: #D86F45;
  }
  #d3 {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    transform: translate(-80px, 0); 
    background: #F5D6B4;
  }
  #d4 {
    width: 100px;
    height: 50px;
    border-radius: 100px 100px 0 0 ;
    transform: translate(0, -25px); 
    background: #D86F45;
  }
  #d5 {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    transform: translate(0, 0); 
    background: #F5D6B4;
  }
  #d6 {
    width: 100px;
    height: 50px;
    border-radius: 0 0 100px 100px;
    transform: translate(80px, 25px); 
    background: #D86F45;
  }
  #d7 {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    transform: translate(80px, 0); 
    background: #F5D6B4;
  }
  #d8 {
    width: 20px;
    height: 20px;  
    border-radius: 100%;
    transform: translate(120px, 0); 
    background: #D86F45;
  }
</style>

以上です！
後編は伝家の宝刀translateに頼りすぎました
是非、Flexboxでtranslateをなるべく使わずに解いてみてください！
お疲れ様でした！

CSSBattle楽しい〜！Flexbox最高！！！