CSS Flex 정리

CSS flex 속성

Flexbox 란?

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.

flex 레이아웃을 만들기 위한 기본적인 HTML구조는 다음과 같다.

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
</div>

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하면된다. 1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용한다.

Flex 속성과 사용

flex의 속성들은 컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나뉜다.

컨테이너(Flex Container)에 적용하는 속성

display : flex;

.container {
	display: flex;
	/* display: inline-flex; */
}

컨테이너에 display: flex;를 적용할 경우 flex 아이템들은 가로방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다.

flex-direction

.container {
	display: flex;
	flex-direction: column; /* 위에서 아래 방향 */
}

컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정한다.

row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)

column: 위에서 아래 방향 (주축이 열 방향)

row-reverse: 오른쪽에서 왼쪽

column-reverse: 아래에서 위 방향

justify-content

.container {
	display: flex;
	flex-direction: column; /* 위에서 아래 방향 */
    	justify-content: center; 
}

주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있다.

flex-start : 아이템들을 시작점으로 정렬

flex-end : 아이템들을 끝점으로 정렬

center : 아이템들을 가운데로 정렬

space-between : 아이템들의 “사이(between)”에 균일한 간격을 만들어 줌

space-around : 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줌

space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줌 (IE와 엣지(Edge)에서는 지원되지 않으니 주의!)

align-items, align-content

.container {
	display: flex;
	flex-direction: column; /* 위에서 아래 방향 */
    	justify-content: center; 
        align-items: center;
}

align-items: 교차 축을 기준으로 정렬한다.
align-content: 컨테이너의 교차 축의 아이템들이 여러 줄일때 사용 가능하다.(flex-wrap:wrap 인 상태에서 사용해야 한다.)

stretch (기본값) : 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남

flex-start : 아이템들을 시작점으로 정렬

flex-end : 아이템들을 끝으로 정렬

center : 아이템들을 가운데로 정렬

baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬

gap : 아이템 사이의 간격을 설정할 때 사용 할 수 있는 속성

flex-wrap : 한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정하는 속성

flex-flow : flex-direction flex-wrap 단축속성

위의 속성들이 실제로 적용되면 다음과 같이 나타난다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        .container {
            width: 600px;
            height: 400px;
            display: flex;
            flex-direction: column;
            /* 위에서 아래 방향 */
            justify-content: center;
            align-items: center;
            gap: 10px;
            background-color: rgb(255, 213, 228);
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: rgb(229, 128, 133);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</body>

</html>

가로 세로 모두 가운데 정렬이 잘 된 것을 확인할 수 있다.

아이템(Flex Item)에 적용하는 속성

flex-basis

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

flex-item의 기본 크기를 설정하며 auto가 기본값이다. auto는 해당 아이템의 width 값을 사용한다.

width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 것.

flex-basis 값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시된다.

* 기본적으로 px이나 em 등의 단위값을 사용하며, 0외에 다른 상숫값을 사용할 수 없다.

flex-grow

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이으로 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정한다. flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.(값을 0을 줄 경우 늘어나지 않는다.) 형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받는다.

/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

flex-grow : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받는다.

flex-grow : 2(2이상의 수) → 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배(배수로)의 여백 공간을 할당 받는다. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라진다.

flex-basis:0을 주게 되면 여백 공간이 아니라 전체 공간을 분할한다.

flex-shrink

아이템의 크기를 고정하거나 축소할 때 사용한다. flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아진다.(값을 0을 줄 경우 줄어들지 않는다.) 기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

.container {
	display: flex;
}
.item:nth-child(1) {
	flex-shrink: 0;
	width: 100px;
}
.item:nth-child(2) {
	flex-grow: 1;
}

align-self : 부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여한다. 기본값 stretch

order : flex-item들의 순서를 수의 크기로 결정. 수가 작을수록 더 우선순위를 받습니다. 음수도 사용 가능하다. ( * 논리적인 마크업 순서를 위해 사용할 수 있다.)

flex : flex-grow flex-shrink flex-basis 단축속성

flex: 1 1 100px;

참고자료 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox https://studiomeal.com/archives/197

'👩🏻‍💻Frontend > CSS' 카테고리의 다른 글

스크린 리더 사용자를 위한 기업의 CSS IR(Image Replacement) 기법 (0)	2023.07.27
CSS Grid 정리 (0)	2023.07.22
CSS 변수, 함수 ( 사용자 지정 CSS 속성 ) (0)	2023.07.15
웹 브라우저 렌더링 개념 - position transform 속성 차이 (1)	2023.07.14
CSS 선택자 적용 우선순위 계산하기 (0)	2023.07.11

셔이의 일상

CSS Flex 정리

CSS flex 속성

Flexbox 란?

Flex 속성과 사용

컨테이너(Flex Container)에 적용하는 속성

아이템(Flex Item)에 적용하는 속성

'👩🏻‍💻Frontend > CSS' 카테고리의 다른 글

티스토리툴바

CSS Flex 정리

CSS flex 속성

Flexbox 란?

Flex 속성과 사용

컨테이너(Flex Container)에 적용하는 속성

아이템(Flex Item)에 적용하는 속성

'👩🏻‍💻Frontend > CSS' 카테고리의 다른 글

'👩🏻‍💻Frontend/CSS' Related Articles

티스토리툴바