css flexbox 정리

Flexbox

- 행과 열 형태로 항목 무리를 배치하는 1차원 레이아웃 메서드

- 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형

 

display : flex;

flex container : 부모요소

flex item : 자식요소

main axis : 메인이 되는 축

cross axis : 메인과 다른 교차되는 축

 

 

display

- 블록, 인라인 요소 중 어느 쪽으로 처리할지, flow,grid, flex 처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정

- 형식적으로 요소의 내부와 외부 디스플레이 유형을 설정

외부

- block

- lnline

내부

- flow :  

- flow-root

- table

- flex

- grid

 

 

flex-direction / container

- flex 컨테이너 내의 아이템을 배치할 때 주축 및 방향을 지정 ( 기본 왼 -> 오, 상 -> 하 )

/* 한 줄의 글을 작성하는 방향대로 */
flex-direction: row;

/* <row>처럼, 대신 역방향 */
flex-direction: row-reverse;

/* 글 여러 줄이 쌓이는 방향대로 */
flex-direction: column;

/* <column>처럼, 대신 역방향 */
flex-direction: column-reverse;

/* 전역 값 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

---

flex-wrap

- 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

- flex-direction을 이용해서 방향을 변경할 수 있다.

 

---

flex-flow

- wrap, direction을 동시에 사용하는 속성

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'>과 <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* 전역 값 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;

---

order

- flex, 컨테이너 안에서 현재 요소의 배치 순서를 지정, 컨테이너 아이템의 정렬 순서는 오름차순 order값이고, 같은 값일 경우 소스 코드의 순서대로 정렬된다.

/* <integer> 값 */
order: 5;
order: -5;

.item:nth-child(3) {
  order: 2
}

/* 전역 값 */
order: inherit;
order: initial;
order: unset;

---

flex-grow

- 남은 공간을 입력값에 비례하여 차지하게 되는 속성

- flex-item 요소가 내부의 할당 가능한 공간의 정도를 선언합니다.

만약 형제 요소로 렌더링 된 모든 flex-item요소들이 동일한 flex-grow 값을 갖는다면,

flex-container 내부에서 동일한 공간을 할당 받습니다.

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

---

flex-shrink

- flex-item의 크기가 줄어지는 정도를 설정한다.

- 0을 설정하면 줄어지지 않는다. 숫자가 크면 클수록 줄어든다.

- 설정된 숫자값에 따라 flex-container요소 내부에서 공간에 비례해서 줄어든다.

- 음수값을 가질 수 없다.

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

---

flex-basis

- flex-item의 초기 크기를 지정한다.

- 입력값을 item들이 가지게 되어 동일한 크기의 초기 크기를 가질 수 있다.

- 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경한다.

---

flex 단축 속성

- flex-grow 1 / flex-shrink 1 / flex-basis 0

/* Keyword values */
flex: auto;
flex: initial;
flex: none;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, length or percentage: flex-basis */
flex: 10em;
flex: 30%;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;