티스토리 뷰

CSS

레이아웃 (2) Flex

GYChoi 2022. 1. 25. 19:09

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

UP NEXT : CSS

댓글
© 2018 webstoryboy