1. Introduction

Flexbox는 모던 웹을 위해 제안된 새로운 layout 방식이다. Flexbox를 사용하면 ⇒

• 요소의 사이즈가 불명확하거나 동적으로 변할 때에 유연하게 대응할 수 있다.
• 복잡한 레이아웃도 보다 적은 코드로 간단히 표현할 수 있다.
  • flexbox는 특히 상하좌우/수직/수평 정렬, 순서 변경, 간격 조절 등을 매우 편하게 할 수 있도록 도와준다.

2. Usage

Flexbox 레이아웃은 부모 요소인 flex-container와, 그 자식들인 flex items로 구성된다.

Flexbox 레이아웃을 사용하기 위한 방법은 flex-container가 될 부모 요소를 정해서, CSS display property를 flex로 지정하는 것이다:

.flex_container {
	**display: flex;**
}

이렇게 하면, 자동적으로 해당 요소의 자식 요소들은 자동적으로 flex item으로서의 속성을 가지게 된다.

3. Flexbox container 속성(Properties)

3.1 flex-direction

• flex-direction 프로퍼티는 flex container의 *main axis를 가로/세로 중 어느 방향으로 지정할 것인지를 설정한다. main axis의 방향에 따라 flex items들이 배치되므로, flex items를 배치하는 방향을 지정하는 설정이라고 생각할 수도 있다.

  ⇒ *flex-container는 flex items의 방향을 정하는 main axis와, main axis에 수직인 cross axis, 이렇게 두가지의 축이 있다. (flex-direction프로퍼티를 통해 main axis의 방향을 설정함에 따라 cross axis의 방향도 자동적으로 결정되는 개념이다)

  1. flex-direction의 기본 값은 row로, 1. 수평 방향으로, 2. 왼쪽부터 오른쪽으로 배치되는 설정이다.

  .flex-container {
    flex-direction: row;
  }
  

  

  1. row-reverse는 1. 수평 방향, 2. 반대로 우에서 좌로 배치되는 설정이다.

  

  1. column은 1. 수직 방향, 2. 위에서 아래로 배치되는 설정,
  2. column-reverse는 1. 수직 방향, 2. 반대로 아래에서 위로 배치되는 설정이다.

3.2 flex-wrap

• flex-wrap 프로퍼티는 flex item들에 대한 wrap 기능이다. text wrap처럼 생각하면 된다. 기본 값은 nowrap으로, 한줄에 욱여넣는 설정이다. 욱여넣어야 하므로 각 item의 크기는 보호되지 않고(no wrap) 가능한 만큼 최대로 축소된다(각 item에 설정된 width나 margin등이 있다면 그러한 크기들은 유지된다. 근데 크기는 유지되는데 겹쳐서 낑긴다).

.flex-container {
  flex-wrap: nowrap; /*기본값이다*/
}

• flex-wrap 프로퍼티의 값으로는 nowrap, wrap, wrap-reverse 가 있다.

3.3 flex-flow

3.4 justify-content

• justify-content 프로퍼티는 flex container의 main axis위에 flex items를 어떻게 배치할지를 정하는 설정이다.
• 기본 값은 flex-start로, 좌측부터 빈공간 없이 배치하는 설정이다.