[CSS] 플렉스(Flex)

iziz·2022년 10월 13일
CSS

CSS

목록 보기
6/8

CSS로 요소를 정렬하는 플렉스(flex) 속성에 대해 알아봅니다.

🖍️ 플렉스 Flex

  • 1차원의 레이아웃을 만드는 개념
    여기서 차원이란, 요소를 정렬하기 위한 하나의 축을 말한다. (x축 또는 y축)
  • 블럭요소는 크기에 관계 없이 수직으로 쌓이는 성격을 가진다.
  • 블럭요소를 수평으로 정렬하려면 정렬하고싶은 요소의 부모요소에 display: flex; 속성을 넣어준다.
    .container {
	display: flex;
}
.item-first {
 width: 300px;
 height: 300px;
}
.item-second {
 width: 300px;
 height: 300px;
}

🎨 Flex container와 Flex items

  1. flex container
    플렉스 컨테이너
    display값을 flex로 지정한 부모요소를 지칭

  2. flex items
    플렉스 아이템
    flex container의 자식요소들을 지칭

container에 부여하는 속성과 items에 부여하는 속성이 다르다.

🎨 Flex container에 부여하는 속성

1. display

Flex Container의 화면 출력(보여짐) 특성

  • display: flex; : flex container를 블록요소의 속성으로 정의하는 것.
    컨테이너 자신은 블록요소처럼 수직으로 쌓임.기본적으로 가로너비 auto값이 지정되어 있음.
    플렉스컨테이너로 사용된 요소는, 컨테이너 자신은 블록요소의 성격을 가지고 있어 수직으로 쌓이지만 자식요소가 수평정렬되는 특성을 가지게 됨.

  • display: inline-flex; : 인라인 요소와 같이 flex container 정의. 컨테이너가 왼쪽에서 오른쪽으로 수평정렬됨. 가로너비가 기본적으로 최소너비를 사용하려고 시도하기 때문에 자식요소의 크기만큼 줄어듦.

2. flex-direction

컨테이너에 주 축(main-axis)을 설정 (수평정렬/수직정렬 설정)

  • flex-direction: row; : 행축(수평)정렬 / (좌 → 우) / 기본값

  • flex-direction: row-reverse; : 수평 반대방향 정렬 / (우 → 좌)

  • flex-direction: column; : 열축(수직)정렬 / (상 → 하)

  • flex-direction: column-reverse; : 수직 반대방향 정렬 / (하 → 상)

  • 시작점 start / 끝점 end / 교차축 cross-axis

3. flex-wrap

flex items의 묶음(혹은 줄 바꿈처리)여부를 결정

  • flex-wrap: nowrap; : 묶음(줄바꿈)없음, 한줄로 정렬 / 기본값
    하나의 줄에서 표현하려고 시도하다 보니 요소가 찌그러질 수 있음.
  • flex-wrap: wrap; : 아이템을 여러 줄로 묶음
    칸이 모자라서 컨테이너 밖으로 넘치려는 요소는 다음줄로 이동함
    컨테이너의 높이가 지정되어 있다면 요소가 컨테이너 아래로 빠져나갈 수 있음

4. Justify-content

주 축의 정렬 방법. (flex에서는 대부분 수평정렬 할 때 사용함)
아이템의 순서는 바뀌지 않음.

  • flex-start : flex items를 시작점으로 정렬 (왼쪽정렬) / 기본값
  • flex-end : flex items를 끝점으로 정렬 (오른쪽 정렬)
  • center : flex items를 가운데 정렬

아래는 잘 사용되지 않는 값들...

  • space-between : 각 flex item 사이를 균등하게 정렬
  • space-around : 각 felx의 외부 여백을 균등하게 정렬

5. align-content

교차 축의 '여러 줄' 정렬 방법 (대부분 수직정렬)
줄바꿈 상태여야 하니 flex-wrap 속성이 존재해야 하며, 정렬 가능한 빈 공간이 있어야 함
아이템이 한 줄일때는 효과 확인불가, 두 줄 이상일 때만 동작함.
조건을 갖추기가 까다롭기 때문에 활용도가 높지 않음.

  • stretch : flex items를 시작점으로 정렬 / 기본값
    height가 지정되어있지 않으면 아이템들을 '한 줄에서' 최대한 늘려서 사용함.
    height가 지정되어 있으면 줄이 넓더라도 아이템들은 위에 붙어있음

  • flex-start : 모든 아이템들을 시작점에 붙여서 정렬해줌

  • flex-end : 모든 아이템들을 끝점에 붙여서 정렬해줌

  • center : 모든 아이템들을 가운데에 모아서 정렬해줌

  • space-between / space-around

6. align-items

교차 축의 한 줄 정렬 방법.
align-content보다 많이 사용하게 됨

  • stretch : flex items를 교차 축으로 늘림
  • flex-start : 한 줄에 대한 정렬을 만드는 것이기 때문에, 여러 줄이 있을 경우 첫 줄의 시작지점, 두번째 줄의 시작지점에 각각의 아이템들이 붙어있게 됨.
  • flex-end : 한 줄에 대한 아래부분에 각각의 아이템들이 붙어있게 됨
  • center : 가운데 정렬
  • baseline : flex items를 각 줄의 문자 기준선(영어 소문자를 쓸 때 아래에 있는 기준선)에 정렬

🎨 Flex Items에 부여하는 속성

1. order

flex item이 정렬되는 순서를 정해줌
HTML의 구조를 바꾸지 않고도 요소의 순서를 필요에 따라 쉽게 바꿀 수 있게 함

  • 0: 기본값, 순서 없음
  • 숫자 : 숫자가 작을수록 먼저(앞쪽에) 정렬됨

ex) A B C D E 순서로 정렬된 요소들을,

.C order: -1;
.E order: 2;
.B order: 17;

로 설정했을 때, C A D E B 순서로 변경됨.

2. flex-grow

flex item의 증가 너비 비율.
기본 아이템 크기에서 입력한 비율만큼 증가시켜 줌.
컨테이너 내부에서 요소들이 차지하는 공간 외의 나머지 빈 공간을 채우기 위해, 각각의 요소들이 몇의 비율로 채워나갈것인지를 결정

  • 0: 기본값
  • 숫자 : 증가비율

ex) A B C 순서로 수평 정렬된 요소들을,

.A flex-grow: 1;

하나만 설정했을 때, 각각의 비율이 1:0:0 이므로
B와 C는 기존 크기 그대로 유지, A가 혼자 늘어나며 빈공간을 모두 채움

ex2) A B C

B flex-grow:2;
C flex-grow:1;

A B C의 비율이 0:2:1 이므로,
A는 기존 크기 그대로 유지하고 B와 C가 2:1 비율로 나눠서 나머지 공간을 차지하게 됨

3. flex-shrink

flex item의 감소 너비 비율
요소의 크기가 원래 크기보다 작아지려고 할 때 적용

  • 1 : Flex Container 너비에 따라 감소하는 비율 있음 (비율 적용) / 기본값
  • 0 : 감소너비를 사용하지 않음. 컨테이너가 줄어도 요소의 너비 유지
  • 숫자 : 감소 비율

ex) A B C
각각의 아이템에는 flex-shrink 기본값이 1로 지정되어 있기 떄문에
따로 설정하지 않았다면 컨테이너의 가로너비가 점점 줄어들면서 요소도 찌그러들게 됨
flex-shrink:0; 으로 지정했다면 요소 부분을 제외한 나머지 컨테이너 공간만 줄어듦

4. flex-basis

flex item의 공간 배분 전 기본 너비

  • auto : 글자 등, 요소의 content(내용) 너비 / 기본값
  • 단위 : px, em, rem 등 단위로 지정
A { flex-basis: auto;
	flex-grow: 1; } 
B { flex-basis: auto;
	flex-grow: ;}
C { flex-basis: auto;
	flex-grow: ;}

일 때, 요소의 content 너비 밖의 '나머지 공간'을 1:1:2 의 비율로 나눠가짐.
A B C의 내용 텍스트 길이가 각각 다르다면,
실제 차지하고 있는 너비는 1:1:2가 아니게 됨.

때문에 내용 텍스트의 길이와 상관 없이 요소 전체의 넓이 비율을 1:1:2로 맞추기 위해서는
flex-basis:0; 을 지정해준다.
기본 너비가 없는 것이니 전체 요소의 실제 비율만 계산해 표시해준다.

profile
iziz

0개의 댓글