【CSSBattle】最初の12問を解いてみた(前編)【Flexbox】


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

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

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

:::note info
**今回は前編ということで、#1~#6 の6問を解いていきます。
よろしくお願いします！**
:::

***

#### 記事リンク
- [【CSSBattle】最初の12問を解いてみた(前編)【Flexbox】](https://qiita.com/rudorufu1981/items/eecbd783c1ceac0b163b) ←本記事
- [【CSSBattle】最初の12問を解いてみた(後編)【Flexbox】](https://qiita.com/rudorufu1981/items/744648f2ceca1f7b94ac)
***

#### Flexboxについての最低限の知識
- [CSSの中央寄せはFlexbox万能説](https://qiita.com/utf8sjis/items/4b69c864aa0f4f79bc94)
- [日本語対応！CSS Flexboxのチートシートを作ったので配布します](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

***

# 【前編】 #1~#6
## #1. Simply Square

**Flexbox**の出番がなかったですw
![#1. Simply Square.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/49f68562-35fd-f8ee-13b4-0742f7073169.png)

<details><summary>解答コード</summary><div>

```#1.html
<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }
  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>
```
</div></details>

## #2. Carrom
遂に**Flexbox**の出番です:laughing:
![#2. Carrom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/c46858c6-0c55-d664-5201-428d8f6f8769.png)

<details><summary>解答コード(flex-direction: column を使うVer)</summary><div>

```#2.html
<div class="container">
  <div>
    <div></div>
    <div></div>
  </div> 
  <div>   
    <div></div>
    <div></div>
  </div> 
</div> 
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #62374e;
  }
  .container {
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .container > div {
    display: flex;
    justify-content: space-between;
  }  
  .container > div > div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
</style>
```
</div></details>

<details><summary>解説(イメージ図)</summary><div>

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/ba3a8068-dc3a-893f-d9ea-ac6880441c76.png)

</div></details>

<details><summary>別解(align-content: space-between を使うVer)</summary><div>

```#2_Sub.html
<div class="container">
  <div>
    <div></div>
    <div></div>
  </div> 
  <div>   
    <div></div>
    <div></div>
  </div> 
</div> 
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #62374e;
  }
  .container {
    width: 300px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .container > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }  
  .container > div > div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
</style>
```
</div></details>

<details><summary>別解の解説(イメージ図)</summary><div>

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/cb0dbc74-98ff-edec-9333-f9bea5f19a6c.png)

</div></details>

## #3. Push Button
**Flexbox**の真骨頂が発揮されました！中央揃えがしやすい！！！
![#3. Push Button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/b689a687-7183-73c2-e422-9bb2bc375cbb.png)

<details><summary>解答コード</summary><div>

```#3.html
<div id="s1"></div>
<div class="circle" id="c1"></div>
<div class="circle" id="c2"></div>
<div class="circle" id="c3"></div>
<style>
  body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #6592CF;
  }
  div {
    position: absolute;
  }  
  #s1 {
    width: 300px;
    height: 150px;
    background: #243D83;
  }  
  .circle {
    border-radius: 50%;
  }  
  #c1 { 
    width: 250px;
    height: 250px;
    background: #6592CF;
  }
  #c2 {
    width: 150px;
    height: 150px;
    background: #243D83;
  }
  #c3 {
    width: 50px;
    height: 50px;
    background: #EEB850;
  }   
</style>
```
</div></details>

## #4. Ups n Downs
`div`を6個置くという発想ができるかという発想力の問題！ 
※別解は`div`3個Ver。`translate`で移動させる実装は、なぜか負けた気がする(誰と戦ってるんだ:smile:)
![#4. Ups n Downs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/250413be-e11f-0b4b-abe4-09baacd6b0c9.png)


<details><summary>解答コード(transform: translateを使わないVer)</summary><div>

```#4.html
<div class="conteiner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;  
    background: #62306D;
  }
  .conteiner {
    display: flex;
    width: 300px;
    height: 200px;
    flex-wrap: wrap;
  }
  .conteiner > div {
    width: 100px;
    height: 100px;   
  }
  .conteiner > div:nth-child(2) {
    border-radius: 50% 50% 0 0;
    background: #F7EC7D;
  }
  .conteiner > div:nth-child(2N+4) {
    border-radius: 0 0 50% 50%;
    background: #F7EC7D;
  }
</style>
```
</div></details>

<details><summary>別解(transform: translateを使うVer)</summary><div>

```#4_Sub.html
<div></div>
<div></div>
<div></div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;  
    background: #62306D;
  }
  div {
    width: 100px;
    height: 100px; 
    background: #F7EC7D;
  }
  div:nth-child(odd) {
    border-radius: 0 0 50% 50%;
    transform: translate(0, 50px);
  }
  div:nth-child(even) {
    border-radius: 50% 50% 0 0;
    transform: translate(0, -50px);
  }
</style>
```
</div></details>

## #5. Acid Rain
図形が重なったら流石に`translate`を使うしかない！
今度は`z-index`を使うとなぜか負けた気がしたので、意地でも使わない方針で実装しました！
![#5. Acid Rain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/a2eef773-9475-271c-eada-6e475c399394.png)

<details><summary>解答コード</summary><div>

```#5.html
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>  
<style>
  body {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    background: #0B2429;
  }
  div {
    width: 120px;
    height: 120px;
  }
  #d1 {
    border-radius: 50%;
    transform: translate(-60px, -60px);
    background: #F3AC3C;
  }
  #d2 {
    border-radius: 50% 0 50% 50%;
    transform: translate(0, 0);
    background: #998235;
  }
  #d3 {
    border-radius: 50% 0 50% 50%;
    transform: translate(60px, 60px);
    background: #F3AC3C;
  }
</style>
```
</div></details>

## #6. Missing Slice
#2のようにcontainerクラスの`div`で囲うのが正統派だが、
遂に`translate`の魔力に負けた実装をしてしまった・・・！
`translate`は依存性が強いです:joy:
![#6. Missing Slice.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104792/519d6eba-4cf0-70a3-8378-168a12ebd355.png)

<details><summary>解答コード</summary><div>

```#6.html
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items:center;
    background: #E3516E;
  }
  div {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  #d1 {
    border-radius: 100% 0 0 0;
    transform: translate(-50px, -50px);
    background: #51B5A9;
  }
  #d2 {
    border-radius: 0 100% 0 0;
    transform: translate(50px, -50px);
    background: #FADE8B;
  }
  #d3 {
    border-radius: 0 0 0 100%;
    transform: translate(-50px, 50px); 
    background: #F7F3D7;
  }  
</style>
```
</div></details>

***

**以上です！**
次回は後編ということで、#7~#12 の6問を解いていきます。