티스토리 뷰
Flex
Flex(플렉스)는 Flexible Box, Flex Box라고 부르기도 합니다. 레이아웃 배치 전용 기능으로 고안되었기 때문에 float나 inline-block등 기존에 레이아웃을 만들 때 썼던 방식보다 강력하고 편리한 기능들이 많습니다.
flex기본 문법 구조
Flexbox는 상위 부모 요소인 flex container와 그 복수의 자식 요소인 flex item으로 구성됩니다.
<!DOCTYPE html>
<html>
<head>
<title>FLEX</title>
<style>
.container {
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
div .container가 부모 요소가 되고 하위 요소인 div .item은 자식 요소가 됩니다.
flex 속성은 크게 컨테이너(부모) 속성과 아이템(자식)속성 두가지로 나누어집니다.
- flex container(부모 속성): flex-direction, flex-wrap, justify-content, align-items, align-content
- flex item(자식 속성): flex, flex-grow, flex-shrink, flex-basis, order
flex-direction
flex item 요소들의 배치되는 메인축의 방향을 결정하는 속성입니다. item의 배치된 방향의 축을 메인축, 메인축과 수직인 축을 교차축이라고 합니다. 메인축의 방향은 부모 요소인 container의 flex-direction 속성으로 결정합니다.
flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성입니다.
justify-content
메인축 방향으로 아이템들을 정렬하는 속성입니다.
align-items
수직축 방향으로 아이템들을 정렬하는 속성입니다.
align-content
flex-wrap: wrap;이 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다.
flex-basis
아이템의 기본 크기를 설정하는 속성입니다.
flex-grow
아이템이 flex-basis의 값보다 커질 수 있는지를 설정하는 속성입니다.
flex-shrink
아이템이 flex-basis의 값보다 작아질 수 있는지를 설정하는 속성입니다.
flex
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.
order
각 아이템의 시각적 나열 순서를 결정하는 속성입니다.
'CSS' 카테고리의 다른 글
레이아웃 (1) Float (0) | 2022.02.02 |
---|---|
IR효과 (0) | 2022.02.02 |
레이아웃 (3) GRID (0) | 2022.02.02 |
CSS 기초 (0) | 2022.01.27 |
CSS 단위와 색상 (11) | 2022.01.20 |