CSS배틀 | #23 박스셉션
4588 단어 challengecsscssbattleboxception
이 짧은 기사에서는 CSSBattle - #23 Boxception 챌린지에 대한 솔루션을 살펴봅니다. 내 사고 과정과 구현 세부 사항에 대한 더 나은 통찰력을 얻으려면 아래 코드 조각을 참조하십시오.
도전:
해결책:
<div class="container flex bg-gold">
<div class="green-square flex">
<div class="lightyellow-square flex">
<div class="gold-square bg-gold"></div>
</div>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flex {
display: flex;
}
.bg-gold {
background: #f3ac3c;
}
.container {
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
.green-square {
width: 200px;
height: 200px;
background: #1a4341;
align-items: flex-end;
}
.lightyellow-square {
width: 100px;
height: 100px;
background: #998235;
align-items: flex-end;
justify-content: flex-end;
}
.gold-square {
width: 50px;
height: 50px;
}
</style>
주요 내용:
- using display flex can be super useful to position nested children elements to certain corners within the parent container
언제나처럼 챌린지의 구현 세부 사항에 대한 피드백이나 질문을 환영합니다. 그렇지 않으면 이것이 도움이 되었기를 바랍니다!
Reference
이 문제에 관하여(CSS배틀 | #23 박스셉션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/npranto/cssbattle-23-boxception-407o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)