CSS Flexboxのレイアウト練習問題

# はじめに

**div**のサイズは以下のような設定で行なってください。

:::note info
インフォメーション
divのサイズを変える場合があります。
:::

```css:index.css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 200px;
}

# background-colorはこちらのカラーになります。
background-color: aqua;
background-color: blue;
background-color: yellowgreen;
background-color: violet;
```

# 1. 縦に4つ箱を並べてみましょう

![Screen Shot 2022-06-18 at 9.52.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/a1900713-cd7d-cfbf-c8c9-113fa201156f.png)

<details><summary>答え</summary><div>


```html:index.html
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
```

```css:index.css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 200px;
}

.a {
  background-color: aqua;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
}
```

</div></details>

# 2. 横の4つの箱を並べてみましょう

![Screen Shot 2022-06-18 at 10.15.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/d961747e-42d3-5837-3fd1-060648c3a384.png)

<details><summary>答え</summary><div>

```html:index.html
    <div class="e">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
    </div>
```

```css:index.css
.a {
  background-color: aqua;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
}

.e {
  display: flex;
  width: 100%;
}
```

</div></details>

# 3. 箱を右にずらしてみましょう

![Screen Shot 2022-06-18 at 10.17.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/71c230ec-abef-a1bb-06bc-1725e69e5d3f.png)

<details><summary>答え</summary><div>

```html:index.html
    <div class="e">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
    </div>
```

```css:index.css
.a {
  background-color: aqua;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
}

.e {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
```

</div></details>

# 4. 両端の子要素も含め、均等に間隔をあけて配置してみましょう

![Screen Shot 2022-06-18 at 10.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/00d5a021-3fe5-05d7-15a4-b40ef8ca66b3.png)

<details><summary>答え</summary><div>

```html:index.html
  <div class="e">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>
```

```css:index.css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 200px;
}

.a {
  background-color: aqua;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
}

.e {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
```

</div></details>

# 5. 両端に配置し、残りの要素は均等に間隔をあけて配置してみましょう

![Screen Shot 2022-06-18 at 10.18.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/18ecc0af-78c5-8289-e745-feb256ab071d.png)

<details><summary>答え</summary><div>

```html:index.html
  <div class="e">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>
```

```css:index.css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 200px;
}

.a {
  background-color: aqua;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
}

.e {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
```

</div></details>

# 6. 4つの箱を中央に配置してみましょう 

![Screen Shot 2022-06-18 at 10.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/d61ee88b-10d9-f067-d511-00c4c7c5dfd0.png)

<details><summary>答え</summary><div>

```html:index.html
  <div class="e">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>
```

```css:index.css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 200px;
}

.a {
  background-color: aqua;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
}

.e {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 800px;
}
```

</div></details>

# 7. 下記の写真のように箱を配置してみましょう

![Screen Shot 2022-06-18 at 10.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/6686d80a-dfd9-49a3-7762-11a3368670cb.png)

<details><summary>答え</summary><div>

```html:index.html
    <div class="a"></div>
    <div class="e">
      <div class="b"></div>
      <div class="c"></div>
    </div>
    <div class="d"></div>
```

```css:index.css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 200px;
}

.a {
  background-color: aqua;
  width: 400px;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
  width: 400px;
}

.e {
  width: 100%;
  display: flex;
}
```

</div></details>

# 8. 最後にスライドショーにしてみましょう

![Screen Shot 2022-06-22 at 3.00.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1803665/92286d91-8d84-a3c6-93f2-3f79420fb40b.png)

<details><summary>答え</summary><div>

```html:index.html
  <div class="slider">
    <div class="slider-inner">
      <div class="slider-item a"></div>
      <div class="slider-item b"></div>
      <div class="slider-item c"></div>
      <div class="slider-item d"></div>
    </div>
  </div>
```

```css:index.css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 200px;
}

.a {
  background-color: aqua;
  width: 400px;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
  width: 400px;
}

.slider {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}

.slider-item {
  width: 200px;
  float: left;
}

.slider-inner {
  width: 400%;
  animation: slider 10s infinite ease;
}

@keyframes slider {
	0% {
	transform: translateX(0);
	}
	33% {
	transform: translateX(-200px);
	}
	66% {
	transform: translateX(-400px);
	}
	100% {
	transform: translateX(-600px);
	}
}
```
</div></details>


# 最後に

お疲れ様です。
これでflexboxについてある程度は理解できると思います。
これからもcssの勉強頑張ってください。