CSS 플렉스 요소

우리가 배운 블록 모델 유형 외에도 또 다른 모델이 있습니다 - 플렉스 요소입니다. 이러한 요소를 얻기 위해서는 해당 요소의 부모에 속성 display를 값 flex로 설정해야 합니다. 부모 자체는 블록 요소로 남아 있지만, 그 자식 요소들은 플렉스 요소가 됩니다.

플렉스 요소는 블록 요소와 마찬가지로 너비와 높이, margin 및 padding을 가질 수 있습니다. 그러나 블록 요소와 달리, 기본적으로 플렉스 요소는 부모 내부에 가로로 배열됩니다.

한번 시도해 봅시다:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex; /* 자식 요소들이 플렉스 요소가 됩니다 */
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат: