css4.css

.container {
  background: beige;
  height: 100vh;
  display: flex;
  /* ↓ default : row */
  /* 중심축을 변경할 수 있다. reverse로 순서를 역으로 바꿀 수 있다. */
  flex-direction: row;
  /* ↓ default : nowrap */
  /* box의 크기를 유지할지 결정한다.
  wrap을 지정하면 화면이 좁아짐에 따라 아래쪽으로 정렬한다. */
  flex-wrap: nowrap;
  /* ↓ direction과 wrap을 한번에 작성할 수 있다. */
  flex-flow: row wrap;
  /* ↓ default : flex-start */
  /* 순서는 그대로지만 중심축을 기준 시작, 중간, 끝 어느 곳에 맞춰 정렬할지 결정한다.*/
  justify-content: space-between;
  /* align-items은 items의 아이템들의 기준을 정한다. */
  /* baseline은 text가 균등하게 보여지도록 한다. */
  align-items: baseline;
  /* justify-content는 중심축을 기준으로 item들을 배치한다면 align-content는
  반대축의 item들을 배치한다.*/
  align-content: center;
}
.item {
  width: 40px;
  height: 40px;
  border: 1px solid black;
}

.item1 {
  background: #d50000;
  padding: 25px;
}
.item2 {
  background: #aa00ff;
}
.item3 {
  background: #304ffe;
}
.item4 {
  background: #0091ea;
}
.item5 {
  background: #00bfa5;
}
.item6 {
  background: #64dd17;
}
.item7 {
  background: #ffd600;
}
.item8 {
  background: #ff6d00;
}
.item9 {
  background: #dd2c00;
}
.item10 {
  background: #263238;
}