FlexBox는 웹 개발에서 사용되는 레이아웃 기술 중 하나이다. FlexBox를 사용하면 컨테이너 안에 있는 아이템들을 정렬하고 간격을 조정하여, 아이템들을 균등하게 배치하는 것이 가능해진다.
이전에는 JavaScript 코드를 작성해야했던 레이아웃을 구성하는 작업을 CSS 만으로 처리하는 것이 가능해진다.
FlexBox를 사용하면 아이템을 부모 엘리먼트를 기준으로 수평 또는 수직 방향으로 정렬한다. 아이템에 필요한 속성에 대하여, 공통적으로 처리하는 것이 가능하다.
다음 코드는 FlexBox를 사용하여 자식 엘리먼트를 수평으로 정렬한 후, 공통적으로 동일한 갭을 주는 사례이다.
<div class="menu-container">
<div class="menu-item">메뉴1</div>
<div class="menu-item">메뉴2</div>
<div class="menu-item">메뉴3</div>
<div class="menu-item">메뉴4</div>
</div>
.menu-container {
display: flex;
justify-content: space-between;
}
.menu-item {
padding: 10px;
}
Flexbox는 여러 개의 자식 요소, 즉 flex item과 그 상위 부모 요소인 flex container로 구성된다.
가장 큰 차이는 flex는 부모를 기준으로 자식 엘리먼트를 수평, 수직 중 하나의 방향으로 설정하는 것이며, grid 는 수직 수평으로 동시에 설정하는 것이 가능하다는 점이다.
grid-template-columns
, grid-template-rows
참고
Flexbox - Learn web development | MDN
CSS 레이아웃 - Grid, Flex 차이 및기본 개념
CSS Grid Vs Flexbox: A Tutorial to Understand the Key Differences
CSS 플렉스박스(flex) flex-grow와 flex-shrink 속성의 완벽 이해