CSS 플렉스 요소
우리가 배운 블록 모델 유형 외에도 또 다른 모델이 있습니다 - 플렉스 요소입니다. 이러한 요소를 얻기 위해서는 해당 요소의 부모에
속성 display를 값 flex로 설정해야 합니다. 부모 자체는 블록 요소로 남아 있지만, 그 자식 요소들은 플렉스 요소가 됩니다.
플렉스 요소는 블록 요소와 마찬가지로 너비와 높이, margin 및 padding을 가질 수 있습니다.
그러나 블록 요소와 달리, 기본적으로 플렉스 요소는 부모 내부에 가로로 배열됩니다.
한번 시도해 봅시다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* 자식 요소들이 플렉스 요소가 됩니다 */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
