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

はじめに

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

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

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つ箱を並べてみましょう

答え

index.html

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

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

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

答え

index.html

    <div class="e">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
    </div>

index.css

.a {
  background-color: aqua;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellowgreen;
}

.d {
  background-color: violet;
}

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

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

答え

index.html

    <div class="e">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
    </div>

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

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

答え

index.html

  <div class="e">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>

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

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

答え

index.html

  <div class="e">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>

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

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

答え

index.html

  <div class="e">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>

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

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

答え

index.html

    <div class="a"></div>
    <div class="e">
      <div class="b"></div>
      <div class="c"></div>
    </div>
    <div class="d"></div>

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

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

答え

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>

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

最後に

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