[CSS Battle - 7] 1-6. Missing Slice

타겟 이미지

 

 

flex 를 적용하고 flex-wrap: wrap 속성을 이용해서 width를 초과하는 element는 다음 행으로 내리자!

그리고 자식 태그는 3개만 만들기

 

내 코드

 

<div class="outer">
  <div class="inner green"></div>
  <div class="inner yellow"></div>
  <div class="inner white"></div>
</div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E3516E;
  }
  .outer {
    display: flex;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #E3516E;
    flex-wrap: wrap;
  }
  .inner {
    width: 100px;
    height: 100px;
  }
  .green {
    background: #51B5A9;
    border-radius: 100% 0 0 0;
  }
  .yellow {
    background: #FADE8B;
    border-radius: 0 100% 0 0;
  }
  .white {
    background: #F7F3D7;
    border-radius: 0 0 0 100%;
  }
</style>

 

아웃풋

 

 

결과

Score: 600.69 {668 bytes}, 100% match

 

정리

flexbox가 정말 유용하다!