[CSSBattle] Target #2 - Carrom

CSSBattle

CSS Battle 사이트는?

Target #2 - Carrom

문제 풀러가기

같은 요소 4개를 만들고, 4방향으로 퍼뜨리면 되는 문제다.

일단 아래와 같이 복잡하게 풀었는데.. 조금 더 쉽게 해결되는 방법이 있는지 더 생각해봐야겠다..

<div>
  <div>
    <div></div>
    <div></div>    
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>

<style>
  body {
    margin: 0;
    background: #62374e;
  }
  body > div {
    display: flex;
    margin: 0 -50px;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
  }
  body > div > div {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
  }
  div > div > div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
</style>

끝