[css] flexbox

 

flexbox는 뷰포트의 요소나 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다. flexbox를 1차원이라 칭하는 것은 레이아웃을 다룰 때 하나의 차원(행이나 열)만을 다루기 때문이다, 이는 행과 열을 함께 조절하는 grid와 대조되는 점이다.

flex 속성을 사용할 때에는 내가 자유롭게 배치하고 싶은 항목들을 감싸고 있는 컨테이너를 flex로 지정한다. flex로 지정된 컨테이너의 일차 자식이 flex 항목이 된다.

 

 

👉여기서부터는 flexbox 속성

 

1) flex-direction: 주축(main-axis)를 결정한다.

• row: 열의 정방향
• row-reverse: 열의 역방향
• column: 행의 정방향
• column-reverse: 행의 역방향

 

 

2) flex-wrap: item의 줄 바꿈을 결정한다. 

• wrap: item이 하나의 행에 들어가지 않을 경우 다음 행으로 넘어간다.
• no-wrap: item의 폭이나 확대, 축소방식을 지정하지 않은 초깃값 상태에서 nowrap을 지정하면 item들이 컨테이너의 하나의 행에 모두 들어갈 수 있게 폭이 줄어든다.
• wrap-reverse: wrap과 같은 기능이나 item이 컨테이너 가장 아래에서부터 정렬된다. (시작점과 끝점이 바뀌는 것으로 이해하는 것이 좋다. 때에 따라 컨테이너 자체의 시작점이 아래일 수도 있기 때문)

 

★ flex-flow: 1)2)의 단축 속성. 순서는 direction, wrap이다.

 

 

3) justify-content: 주축을 따라 item을 정렬하는 방식을 지정한다.

• flex-start: 시작점부터 정렬
• flex-end: 끝점부터 정렬
• center: 가운데 정렬
• space-between: 첫번째 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지는 고르게 정렬
• space-around: item마다 좌우 균등한 여백을 가지도록 정렬
• space-evenly: 모든 여백이 균등하도록 정렬

 

 

 

4) align-items: 교차축을 따라 item을 정렬하는 방식을 지정한다. 

• stretch: item의 높이(교차축 방향 길이이므로 너비가 될수도 있음. 이하 동)가 item이 있는 행의 최대 높이가 된다.
• flex-start: item이 item이 있는 행의 시작점으로 정렬
• flex-end: 행의 끝점으로 정렬
• center: 행 높이의 가운데로 정렬 (교차축 방향 중앙정렬)
• baseline: 문자 기준선에 맞춰 정렬

 

 

5) align-content: 교차축의 정렬 방식을 지정한다. 플렉스 라인 사이의 공간을 제어하는 것으로, 주로 item들이 2줄 이상이고 여백이 있을 때 사용한다고 생각하면 된다.

• flex-start: 전체 행(교차축 기준으로 열이 될수도 있음. 이하 동)이 시작점부터 정렬
• flex-end: 전체 행이 끝점부터 정렬
• center: 가운데 정렬 (교차축 방향 중앙정렬)
• stretch: item들의 높이(교차축 기준으로 너비가 될수도 있음)가 지정되어 있지 않을 경우 컨테이너의 교차축을 채우기 위해 item의 높이가 늘어난다. item의 높이가 정해져 있을 경우 행의 높이만 늘어난다.

• space-between: 첫 행은 시작점에, 마지막 행은 끝점에 정렬되고 나머지 행은 균등 정렬
• space-around: 각 행이 균등한 여백을 가지도록 정렬
• space-evenly: 모든 여백이 균등하도록 정렬(정의되어 있지는 않지만 사용가능) 웹표준성에 어긋나려나??

 

👉여기서부터는 flex item 속성

 

1) order: item의 순서를 할당한다. 숫자가 클수록 뒤쪽으로 밀리며 음수 사용가능하다.

 

 

2) flex-basis: item의 기본 크기를 결정. 기본값은 auto이고, 각 item에 크기가 결정되어 있지 않으면 item의 내용물만큼 크기를 차지하게 된다.

 

3) flex-grow: item이 컨테이너 안에서 할당 가능한 공간의 정도를 지정한다.

3개의 item 중에서 첫번째 item에 grow값을 2와 3으로 할당했을 때의 모습이다.(두번째, 세번째 item은 할당값이 없으므로 기본값 1이 할당된 상태)

4) flex-shrink: item들의 폭의 합이 컨테이너보다 더 클 때 컨테이너에 맞춰 줄어들 정도를 지정한다.

D와 E의 shrink 값이 2어서 ABC에 비해 더 줄어든 모습.

 

★ flex: 2)3)4)의 단축 속성. 순서는 grow, shrink, basis이다. 이때 flex: initial은 0 1 auto를 의미하고, flex: auto는 1 1 auto를, flex: none은 0 0 auto를 의미한다. 더 축약해서 flex: 2와 같이 사용할 수 있는데 이는 2 1 0과 동일하게 처리된다.

 

 

5) align-self: 교차축에서 item 하나의 정렬 방식을 지정한다.

• stretch: 행(교차축에 따라 열이 될수도 있음)을 채우기 위해 item을 늘림.
• flex-start: item이 시작점으로 정렬
• flex-end: item이 끝점으로 정렬
• center: 아이템이 교차축 방향으로 가운데 정렬
• baseline: 문자 기준선에 맞춰 정렬