CSS Flexbox

CSS Flexbox

오랫동안 CSS Layout을 작성할 수 있는 도구는 float 및 positioning 뿐이었다.

그로 인해 문제가 있는 것은 아니었지만, 어떤 면에서는 제한적이고 한계가 존재

Flexbox라 불리는 Flexible Box module은, Flexbox 인터페이스 내의 아이템 간 "공간 배분"과 강력한 "정렬"기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다.

 

• 요소 간 공간 배분과 정렬 기능을 위한 1차원(단방향) 레이아웃
• 크게 딱 2가지만 기억할 것! 요소! 그리고 축!

 

• 요소
  • Flex Container (부모 요소)
  • Flex Item (자식 요소)
• 축
  • main axis (메인축)
  • cross axis (교차축)

 

Flexbox의 시작

Flex Container를 선언하는 것으로 시작

• Flexbox 레이아웃을 형성하는 가장 기본적인 모델
• Flex Item들이 놓여있는 영역
• 생성하려면 display 속성을 flex (block 특성의 flex container를 정의)
• 혹은 inline-flex (inline 특성의 flex container를 정의)로 지정
• 부모가 Item을 컨트롤하는 것임을 생각해야한다!!!

부모 요소에 display: flex; 혹은 display: inline-flex;를 작성

.flex-container {
    display: flex;
}

flex와 inline-flex는 차이는 단순하다.
display: flex;로 지정된 flex container는 block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex;로 지정된 flex container는 inline 요소와 같은 성향(수평 쌓임)을 가진다.

 

* 여기서 말하는 수직과 수평 쌓임은 items가 아니라 container라는 것에 주의!!
  두 값의 차이는 내부에 items에는 영향을 주지 않는다.

 

Flex에 적용하는 속성

• 배치 방향 설정 (flex items의 주축(main-axis)을 설정)
  • flex-direction
• 메인축 방향 정렬
  • justify-content, justify-items, justify-self
  • justify-items, justify-selfs는 의미가 없다. margin auto가 있기 때문
• 교차축 방향 정렬
  • align-items, align-self, align-content
• 기타
  • flex-wrap, flex items의 여러 줄 묶음(줄 바꿈) 설정
  • flex-flow, flex-direction와 flex-wrap의 단축 속성
  • flex-basis, flex-grow, flex-shrink, flex, order

 

flex-direction

• main-axis 방향만 바뀐다.
  • main axis는 왼쪽부터 오른쪽으로 가는 것이 기본 값
  • cross axis는 위쪽부터 아래쪽으로 가는 것이 기본 값
• flexbox는 단방향 레이아웃이기 때문이다.

  .box {
          display: flex;
          flex-direction: column;
        }

 

justify & align

content & items & self

• content
  • 여러 줄을 동시에
• items
  • 한 줄만
• self
  • flex item 개별 요소를 선택

 

• justify-content
  • flex-start, 아이템들을 시작점으로 정렬 (기본값)
  • flex-end, 아이템들을 끝점으로 정렬
  • center, 아이템들을 가운데로 정렬
  • space-between, 아이템들의 “사이(between)” 균일한 간격
  • space-around, 아이템들의 “둘레(around)”에 균일한 간격
  • space-evenly, 아이템들의 사이와 양 끝에 균일한 간격
• align-items
  • stretch, 요소들을 교차축의 양끝 기준으로 상하로(컨테이너에 맞도록) 늘린다. (기본값)
  • flex-start, 아이템들을 시작점으로 정렬
  • flex-end, 아이템들을 끝점으로 정렬
  • center, 아이템들을 가운데로 정렬
  • baseline, 아이템들을 텍스트 베이스라인 기준으로 정렬
• align-content
  • flex-start, flex-end, center, stretch, space-between, space-around
• align-self
  • auto, flex-start, flex-end, center, baseline, stretch

 

flex-wrap

요소들을 강제로 한 줄에 배치 되게 할 것인지 여부 설정

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

• nowrap(기본값) : 모든 아이템들 한 줄에 나태내려고 한다. -> 그래서 자리가 없어도 튀어나온다.
• wrap : 넘치면 그 다음줄로
• wrap-reverse : 넘치면 그 윗줄로(역순)

자료 찾다가 너무 귀여워서, 추가 (https://studiomeal.com/archives/197)

 

flex-flow

flex-direction과 flex-wrap의 shorthand(축약형)

flex-direction과 flex-wrap에 대한 설정 값을 차례로 작성

.flex-container {
    flex-flow: row nowrap;
}

 

flex-basis

flex 아이템의 기본 크기를 설정 (flex-direction이 row일 때는 너비, column일 때는 높이)

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

기본값 auto는 해당 아이템의 width값을 사용

.item {
	flex-basis: 100px;
}

.item {
	width: 100px;
}

flex-basis로 설정하면, 원래의 width가 100px이 안되는 A와 C는 100px로 늘어났고, 원래 100px이 넘는 B는 그대로 유지

반면 width로 설정하면, 원래 100px을 넘는 BBB도 100px로 고정

 

flex-grow

주축에서 남는 공간을 항목들에게 분배하는 방법, 각 아이템의 상대적 비율을 정하는 것이 아니다.

기본값은 0이고 음수는 불가능하다.

아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각

 

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정

flex-shrink에는 숫자값이 들어가는데,

0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아진다.

기본값이 1이기 때문에 따로 세팅하지 않아도 아이템이 flex-basis보다 작아진다.

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭을 설정하는데 사용된다.

 

flex

flex-grow, flex-shrink, flex-basis의 shorthand(축약형)

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

 

order

각 아이템들의 시각적 나열 순서를 결정

작은 숫자일수록 앞(우선 쌓이는 방향)으로 이동

기본값은 0, 음수도 가능

HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의