flex

• flex : 레이아웃 배치 전용 기능으로 고안됨

flex의 구조

• 부모 요소인 Flex Container와 자식 요소인 Flex Item으로 구분
  -> 부모(컨테이너)는 flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템(자식)들이 어떤 형태로 배치된다.
• flex의 속성에는 두 가지로 나뉜다.

1. 컨테이너에 적용하는 속성
2. 아이템에 적용하는 속성

---

flex 컨테이너에 적용하는 속성

flex컨테이너 설정 display:flex

• flex 컨테이너에 display:flex;를 적용하는게 시작
• flex 아이템들은 가로 방향으로 배치
• 너비는 자신이 가진 내용물의 width만큼 차지
• 높이는 컨테이너의 높이만큼 늘어난다.

배치 방향 설정 flex-direction

• 아이템들이 배치되는 축의 방향을 결정하는 속성

• row(기본값) : 아이템들이 행(가로) 방향으로 배치

• row-reverse : 아이템들이 역순으로 가로 배치

• column : 아이템들이 열(세로) 방향으로 배치

• colum-reverse : 아이템들이 역순으로 세로 배치

줄넘김 처리 설정 flex-wrap

• 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을때 아이템 줄바꿈을 어떻게 할지 결정하는 속성

• nowrap(기본값) : 줄바꿈 x / 넘치면 그냥 삐져 나간다.

• wrap : 줄바꿈 o / float이나 inline-block으로 배치한 요소들과 비슷하게 동작

• wrap-reverse : 아이템을 역순으로 줄바꿈

flex-flow

• flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
• flex-direction, flex-wrap 순으로 한 칸 떼고 쓰면 된다.

/* flex-direction: row; 와*/
/* flex-wrap: wrap;을 합쳐서 쓰면*/
flex-flow : row wrap;

메인축 방향 정렬 justify-content

• flex-start(기본값): 아이템들을 시작점으로 정렬 / flex-direction이 row일 때는 왼쪽, column일 때는 위쪽으로 정렬

• flex-end : 아이템들을 끝점으로 정렬 / flex-direction이 row일 때는 오른쪽, column일 때는 아래쪽으로 정렬

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

• space-between : 아이템들의 사이(between)에 균일한 간격을 만듦

• space-around : 아이템들의 둘레(around)에 균일한 간격을 만듦

• space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만듦

수직축 방향 정렬 align-items

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

• flex-start : 아이템들을 시작점으로 정렬 / flex-direction: row일 때는 위, flex-direction:column일 때는 왼쪽 정렬

• flex-end : 아이템들을 끝점으로 정렬 / flex-direction: row일 때는 아래, flex-direction:column일 때는 오른쪽 정렬

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

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

justify-content : center;
align-item : center;
를 하면, 아이템을 한 가운데로 놓을 수 있다.

여러 행 정렬 align-content

• flex-wrap:wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

• 속성

  • strerch(기본값)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

---

flex 아이템에 적용하는 속성들

유연한 박스의 기본 영역 flex-basis

• flex 아이템의 기본 크기를 설정 / flex-direction:row : 너비, flex-direction:column : 높이

• flex-basis의 값으로는 width,height 등에 사용하는 각종 단위의 수가 들어갈 수 있다.

• flex-basis:auto(기본값) -> 해당 아이템의 너비값을 사용

• flex-basis:content -> 컨텐츠의 크기

유연하게 늘리기 flex-grow

• 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성

• flex-grow에는 숫자값이 들어감

• 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈 공간을 채운다.

• flex-grow:0(기본값)

유연한게 줄이기 flex-shrink

• flex-grow와 쌍을 이루는 속성
• flex-basis의 값보다 작아질 수 있는지 결정
• 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아짐
• flex-shrink:1(기본값)

flex

• flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형 속성

수직축으로 아이템 정렬 align-self

• 해당 아이템의 수직축 방향 정렬

• 속성

  • auto:기본값
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline

• align-self는 align-item보다 우선권이 있다.
  -> 전체 설정보다 각각의 개별 설정이 우선됨

배치 순서 oreder

• 각 아이템들의 시각적 나열 순서를 결정하는 속성
• 작은 숫자일수록 먼저 배치
• HTML 자체의 구조를 바꾸는 것은 아니다!

z-index

• z-index로 z축 정렬을 할 수 있음.
• 숫자가 클수록 위로 올라옴

참고링크

---

flex 예제

1단계: 헤더와 푸터를 flex-item으로 만들고 세로 방향으로 배열

2단계: 푸터안의 텍스트를 가운데 정렬

3단계: 중단 부분을 마크업

4단계: 중단 부부의 세 부분을 가로로 배열

5단계: 양쪽 사이드바가 남는 공간을 1:1 비율로 나눠가지기

6단계: 왼쪽 사이드바의 너비 150px, 오른쪽 사이드바의 너비 120px, 나머지 여백은 중앙박스가 차지

7단계: 컨테이너의 높이 100vh이상

8단계: 중단 부분의 높이가 헤더와 푸터가 사용한 나머지를 차지

9단계: 중아박스에 텍스틀 길게 넣기, 화면의 너비 줄이기

10단계: 화면의 너비가 줄어들어도 양쪽 사이드바의 너비 변화 x