TIL (2022.1.21) - [CSS] flex

박세진·2022년 1월 21일

flex

화면 크기에 따라 레이아웃의 배치나 크기를 조절해야 할 때 편리하게 배치할 수 있도록 하는 속성이다.

flex 레이아웃을 만들기 위한 기본적인 HTML 구조

<div class="container">
  <div class="item">hello</div>
  <div class="item">nihao</div>
  <div class="item">bonjour</div>
</div>

부모 요소인 div.container를 Flex Container
자식 요소인 div.item을 Flex Items

flex container에 적용하는 속성

display

display: flex; : 블록 특성의 flex container를 정의. 블록 요소 같이 수직 쌓임 성향을 가진다. (수직 쌓임은 items가 아닌 container임, 내부 items에는 영향을 주지 않음)
display: inline-flex; : 인라인 특성의 flex container를 정의. 인라인 요소 같이 수평 쌓임 성향을 가진다. (수평 쌓임은 items가 아닌 container임, 내부 items에는 영향을 주지 않음)

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축속성이다. flex items의 주 축(main-axis)을 설정하고, items의 여러 줄 묶음(줄 바꿈)도 설정한다.

.container {
	flex-flow: column-reverse wrap;
    /* flex-direction flex-wrap */
}

flex-direction : items의 주 축(main-axis)를 설정
- row : 기본값. items를 수평축(좌→우)으로 표시
- row-reverse : row의 반대축으로 표시(우→좌)
- column : items를 수직축(위→아래)으로 표시
- column-reverse : column의 반대축으로 표시(아래→위)
flex-wrap : items의 여러 줄 묶음(줄 바꿈) 여부 (컨테이너가 아이템을 한 줄에 담을 여유 공간이 없을 때 아이템 줄 바꿈 여부)
- nowrap : 기본값. 여러 줄로 묶지 않음(한 줄 표시)
- wrap : 여러 줄로 묶음
- wrap-reverse : 역 방향으로 여러 줄 묶음

justify-content

주 축(main-axis)의 정렬 방법

flex-start : 기본값. items를 시작점(flex-start)으로 정렬.
flex-direction이 row(좌→우)일 때는 왼쪽, column(위→아래)일 때는 위.
flex-end : items를 끝점(flex-end)으로 정렬
center : items를 가운데 정렬
space-between : 시작 item은 시작점에 마지막 item은 끝점에 정렬되고, 나머지는 사이에 균일한 간격으로 고르게 정렬된다.
space-around : items를 균등한 여백을 포함하여 정렬한다.

align-content

교차 축(cross-axis)의 여러 줄 정렬 방법.
flex-wrap 속성을 통해서 item가 여러 줄이고 여백이 있을 경우에만 사용 가능함. 한 줄인 경우에는 작동

stretch : 기본값. container의 교차 축을 채우기 위해 items를 늘린다.
교차 축에 해당하는 너비(width, height)가 auto(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어남.
flex-start : items 시작점으로 정렬
flex-end : items 끝점으로 정렬
center : items 가운데 정렬
space-between : 시작 item은 시작점에 마지막 item은 끝점에 정렬되고, 나머지는 사이에 균일한 간격으로 고르게 정렬된다.
space-around : items를 균등한 여백을 포함하여 정렬한다.

align-items

교차 축(cross-axis)의 한 줄 정렬 방법
align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 된다.

stretch : 기본값. Container의 교차 축을 채우기 위해 items를 늘린다.
flex-start : items를 각 줄의 시작점으로 정렬
flex-end : items를 각 줄의 끝점으로 정렬
center : items를 가운데 정렬
baseline : items를 문자 기준선에 정렬

flex item에 적용하는 속성

order

flex item의 순서

기본 값은 0. 숫자가 작을 수록 우선적이고, 숫자가 클수록 순서가 뒤이다. 음수 허용!

flex-grow

item의 증가 너비 비율

기본 값은 0. 숫자로 증가비율을 지정한다.

flex-shrink

item의 감소 너비 비율

기본 값은 1. 숫자가 크면 더 많은 너비가 감소한다.
칸이 모자라면 요소가 찌그러질 때 값을 0으로 지정하면 찌그러지지 않고 원래의 크기를 유지한다.
요소의 너비(width, height, flex-basis 등)에 영향을 받기 때문에 계산하기 까다롭다.

flex-basis

item의 공간 배분 전 기본 너비

기본 값은 auto.
px, em, rem 등 단위로 지정
0으로 설정하면 flex grow를 사용해서 비율을 부여했을 때, 실제 비율에 맞게 나온다.

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 단축 속성.

.item {
	flex: 1;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
    flex: 1 1 auto;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
    flex: 1 500px;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px;*/
}

align-self

align- items의 item 버전으로, align-items가 전체 아이템의 수직 축 방향 정렬이라면, align-self는 해당 아이템의 수직 축 방향 정렬.
일부 item만 정렬 방법 변경시 align-self 사용
align-items 속성보다 우선한다.

auto : 기본값. container의 align-items 상속
stretch : 기본값. Container의 교차 축을 채우기 위해 items를 늘린다.
flex-start : items를 각 줄의 시작점으로 정렬
flex-end : items를 각 줄의 끝점으로 정렬
center : items를 가운데 정렬
baseline : items를 문자 기준선에 정렬

https://heropy.blog/2018/11/24/css-flexible-box/
https://studiomeal.com/archives/197

heropy님 블로그랑, 1분 코딩 블로그에 flex에 대해서 정리가 잘 되어 있어서 보면서 공부하기 딱 좋았다.
1분 코딩 블로그에서 주 축(main-axis)를 오뎅꼬치라고 생각하면 더 이해가 쉬울 거라고 했는데, 정말 오뎅꼬치라고 생각하니까 이해하는데 도움이 된다.

justify는 주 축(오뎅꼬치) 방향으로 정렬
align은 수직 축(오뎅을 뜯어내는) 방향으로 정렬