CSS 플렉스 (정렬) , Flex Container, Flex Items

1차원 레이아웃, Flex Container + Flex Items, 정렬

Flex Container

속성

: display,

flex-flow, flex-direction, flex-wrap,

justify-content,

align-content,

align-items

display

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

flex : 블록 요소와 같이 Flex Container 정의

block 와 같은 특징을 가지고 있어 flex 속성의 Flex Container들 끼리 수직으로 정렬되며 width : auto는 자동적으로 최대값이 되려고 함.

inline-flex : 인라인 요소와 같이 Flex Container 정의

inline 와 같은 특징을 가지고 있어 Flex Container들이 수평으로 정렬이 되며 가로 세로 길이는 최소가 기본값.

flex-direction

주 축을 설정, 수평 / 수직 정렬 설정

기본값, row : 행 축(좌->우) // 수평

row-reverse : 행 축 (우->좌)

column, column-reverse // 수직 관련된 주축, 블록의 기본으로 주로 사용안함.

flex-wrap

Flex Items 묶음(줄 바꿈) 여부, 수평 정렬로 가정

기본값, nowrap : 묶음(줄 바꿈) 없음. 즉 하나의 줄에 모든 요소를 끼워 넣어 모양이 찌그러짐

wrap : 여러 줄로 묶음

justify-content

주 축의 정렬 방법

기본값, flex-start : Flex Items를 시작점으로 정렬 (x축, 수평정렬 기준 왼쪽)

flex-end : Flex Items를 끝점으로 정렬 (x축, 수평정렬 기준 오른쪽)

center : Flex Items를 가운데 정렬

align-content

교차 축의 여러 줄 정렬 방법, 수평 정렬이라면 교차 축의 정렬 방법이니깐 수직 정렬을 의미. 이때 flex-wrap : wrap;으로 여러 줄이 있어야하며 정렬이 가능하도록 어느정도의 여백이 있어야함. 한줄이면 작동 안함.

기본값, stretch : Flex Items를 시작점으로 정렬

flex-start : Flex Items를 시작점으로 정렬

flex-end : Flex Items를 끝점으로 정렬

center : Flex Items를 가운데 정렬

align-items

교차축의 한 줄 정렬 방법. 한 줄 정렬 방법이기 때문에 align-content보다 활용도가 높음

기본값, stretch : Flex Items를 교차축으로 늘림

flex-start : Flex Items를 각 줄의 시작점으로 정렬

flex-end : Flex Items를 각 줄의 끝점으로 정렬

center : Flex Items를 각 줄의 가운데 정렬

Flex Items

속성

: order,

flex, flex-grow, flex-shrink, flex-basis,

align-self

order

Flex Item의 순서, html 구조를 바꾸지 않고도 화면에 출력되는 요소의 순서를 바꿀 수 있다는 장점

기본값, 0 : 순서 없음

숫자 : 숫자가 작을 수록 먼저 정렬이 됨.

flex-grow

Flex Item의 증가 너비 비율, 너비의 여백을 채우기 위해서 증가하는 비율

기본값 0 : 증가 비율 없음

숫자 : 증가 비율

flex-shrink

Flex Item의 감소 너비 비율

기본값, 1 : Flex Container 너비에 따라 감소 비율 적용

숫자 : 감소 비율

flex-shrink : 0;
/* 0으로 설정하는 경우 shrink가 안되고 크기 줄지 않음. container보다 크기가 크더라도 container 밖으로 item이 나옴. item의 크기 변형을 막을 수 있음*/

flex-basis

Flex Item의 공간 배분 전 기본 너비

기본값, auto : 요소의 content(내용) 너비

단위 : px, em, rem 등 단위로 지정

글자가 시작하는 지점과 글자가 끝나는 지점 = 요소가 가지고 있는 content의 기본 너비

/* 요소의 크기를 글자와 상관없이 동일하게 설정하기*/
flex-grow : 1;
flex-basis: 0; /*기본 너비를 0으로 */