고정 헤더 영역
상세 컨텐츠
본문
반응형
부모 요소에 display: flex를 사용하고 자식 요소를 원하는 영역을 배치하던 와중,
이렇게 child2 에 특별히 지정하지 않은 남은 영역을 모두 할당하고 싶을 때 사용하면 된다.
child2 를 예시로 들어보면,
.child2 {
flex: 1;
}을 해주면 남은 영역이 모두 할당된다.
맨 위 사진의 코드 예시)
<style>
.parent {
width: 100%;
height: 200px;
background-color: chocolate;
display: flex;
}
.child1 {
background-color: darkcyan;
}
.child2 {
background-color: thistle;
flex:1;
}
</style>
<body>
<div class="parent">
parent div
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
이상
'FrontEnd > css' 카테고리의 다른 글
| [ Tailwind.css ] 이미지를 배경 '클래스' 로 등록하는 방법, customizing background Image (0) | 2022.02.17 |
|---|---|
| [ Tailwind css ] Vue.js 3, vue-cli 4.5.x Error Install the another correct version! 설치 오류 (0) | 2022.02.15 |
| [ Css ] Transition 트랜지션 사용하기 (0) | 2021.10.26 |
댓글 영역