Flexbox(플렉스박스)

CSS에서 Flexbox는 grid와 함께 화면의 레이아웃을 구성할 때 필수적인 요소이다. Flexbox는 자식 요소들을 효율적으로 정렬하고 원하는 방향으로 배치하는 목적으로 주로 사용되는 기술이다. 부모 요소인 Flex 컨테이너와 자식 요소인 Flex 아이템으로 구성된다. Flex 컨테이너는 Flexbox를 정의하고, Flex 아이템은 컨테이너 내에서 실제로 배치되는 요소들을 나타낸다. 최근의 다양한 넓이의 화면을 대응하기 위해 Flexbox의 활용도는 날로 높아지고 있다.

Flexbox (플렉스박스)는 주로 반응형 화면을 구성할 때 크기를 알 수 없거나 동적인 경우에도 컨테이너의 항목 간에 공간을 배치, 정렬 및 분배하는 보다 효율적인 방법을 제공하기 위한 요소이다.

Flex(플렉스) 레이아웃의 기본 아이디어는 모든 종류의 디스플레이 장치 및 화면 크기를 수용하기 위해 사용 가능한 공간을 가장 잘 채울 수 있도록 항목의 너비와 높이 그리고 순서를 변경할 수 있는 기능을 컨테이너에 제공하는 것이다. 플렉스 컨테이너는 항목을 확장하여 사용 가능한 여유 공간을 채우거나 항목을 축소하여 오버플로 발생을 방지한다.

수직 기반의 block(블럭)과 수평 기반의 inline(인라인)과 달리 flexbox 레이아웃은 방향에 구애받지 않는다. 크기에 관계없이 전체 페이지 또는 특정 부분의 레이아웃을 결정하는데 유용하게 사용될 수 있다.

Flexbox(플렉스박스) 속성

flexbox(플렉스박스)는 단일 속성이 아닌 부모요소와 자식자식요소로 구성되어 있다. 그 중 일부는 컨테이너(부모 요소)에 설정되는 반면 나머지는 아이템(자식 요소)에 설정된다.

flex container

display:

플렉스 컨테이너를 정의한다. 주어진 값에 따라 인라인 또는 블록. 모든 직계 자식에 대해 플렉스 레이아웃이 적용된다.

.container {
  display: flex;
}

flex-direction:

플렉스 컨테이너에 배치되는 자식요소의 배치 방향을 정의한다. Flexbox는 단방향 레이아웃 개념이다.

.container {
  flex-direction: column;
}

row (default): 왼쪽에서부터 오른쪽으로 균등한 넓이로 자식 요소 배치
row-reverse: 오른쪽에서부터 왼쪽으로 균등한 넓이로 자식요소 배치
column: 위에서 아래로 자식요소 배치
column-reverse: 아래서 위로 자식요소 배치

flex-wrap:

기본적으로 플렉스 항목은 모두 한 줄에 맞추려고 하고 이때 자삭항목의 합계 넓이가 부모의 넓이를 넘어가면 오버플로우가 발생하기때문에 이처럼 자식항목이 부모의 넓이를 넘어갈 경우 적용하여 아래 줄에 자연스럽게 넘길 수 있다.

.container {
  flex-wrap: wrap;
}

nowrap (default): 모든 플렉스 항목을 한 줄에 표시.
wrap: 자삭항목의 합계 넓이가 부모의 넓이를 넘어가면 위에서 아래로 다음 줄에 표시.
wrap-reverse: 자삭항목의 합계 넓이가 부모의 넓이를 넘어가면 아래에서 위로 윗 줄에 표시

flex-flow:

이는 플렉스 컨테이너의 기본 축(디폴트는 가로축)과 교차 축(디폴트는 세로 축)을 함께 정의하는 flex-direction 및 flex-wrap 속성의 통합 속성이다.

.container {
  flex-flow: column wrap;
}

justify-content:

컨테이너에 설정되어 있는 기본 축의 정렬 방법을 결정하는 속성이다. 한 줄의 모든 플렉스 항목이 유연하지 않거나 유연하지만 최대 크기에 도달한 경우 남은 여유 공간을 분산하는 데 도움이 된다. 또한 항목이 줄을 넘을 때 항목의 정렬이 일부 제어 가능하다.

.container {
  justify-content: space-between;
}

flex-start (default): 플렉스 아이템이 flex-direction의 시작 부분에서부터 차례대로 채워진다.
flex-end: 플렉스 아이템이 flex-direction의 끝 부분에서부터 차례대로 채워진다.
start: 플렉스 아이템이 writing-mode 방향의 시작 부분에서부터 차례대로 채워진다.
end: 플렉스 아이템이 writing-mode 방향의 끝 부분에서부터 차례대로 채워진다
left: 컨테이너의 왼쪽 가장자리를 향해 항목이 채워진다. flex-direction과 맞지 않는 경우가 아니면 start 와 동일하게 작동한다.
right: 컨테이너의 오른쪽 가장자리를 향해 항목이 채워진다. flex-direction과 맞지 않는 경우가 아니면 end 와 동일하게 작동한다.
center: 플렉스 아이템이 중앙에 정렬된다.
space-between: 플렉스 아이템이 라인에 고르게 분포된다. 첫 번째 항목은 시작 줄에, 마지막 항목은 끝 줄에 배치된다.
space-around: 플렉스 아이템 주위에 동일한 공간을 두고 같은 줄에 고르게 분포된다. 모든 항목의 양쪽에 동일한 공간이 있으므로 시각적으로 공간이 동일하지 않을 수 도 있다. 첫 번째 항목에는 컨테이너 가장자리에 대해 1 단위의 공간이 있지만 다음 항목에는 적용되는 자체 간격이 있으므로 다음 항목 사이에는 2 단위의 공간이 존재한다
space-evenly: 각각의 두 항목 사이의 간격(및 가장자리까지의 공간)이 동일하도록 항목이 분산된다.

align-items:

플렉스 아이템이 현재 라인의 교차축을 따라 배치되는 방식에 대한 기본 동작을 정의한다. 교차축(주축에 수직)에 대한 콘텐츠 정렬 버전으로 생각하면 된다.

.container {
  align-items: center;
}

align-content:

justify-content가 기본 축 내에서 개별 항목을 정렬하는 방식과 유사하게 교차 축에 추가 공간이 있을 때 플렉스 컨테이너의 선을 정렬한다.

.container {
  align-content: space-between;
}

gap:, row-gap:, column-gap:

gap 속성은 플렉스 아이템 사이의 공간을 명시적으로 제어한다. 이때 외부 가장자리가 아닌 항목 사이에만 해당 간격이 적용되기 때문에 아이템 요소의 margin 속성 과는 틀리다.

.container {
  gap: 10px;
  gap: 10px 20px; /* row-gap 과 column gap 을 동시에 각각 설정 */
  row-gap: 10px;
  column-gap: 20px;
}

flex items

order:

기본적으로 플렉스 아이템은 컨테이너에서 지정한 속성 순서대로 배치 되지만 order 속성을 적용하면 order 속성이 우선 적용된다. 자식 요소의 순위가 지정되어 있더라도 자식 요소의 순위가 같다면 컨테이너의 속성을 우선하게 된다

.item {
  order: 5;
}

flex-grow:

필요에 따라 플렉스 아이템(자식요소)이 커질 수 있는 기능을 정의한다. 비율로 사용되는 단위 없는 값을 허용한다. 항목이 차지해야 하는 플렉스 컨테이너 내부의 사용 가능한 공간의 양을 나타낸다.

모든 아이템(자식요소)의 flex-grow가 1로 설정된 경우 컨테이너(부모)의 나머지 공간은 모든 아이템(자식요소)에 균등하게 분배된다. 아이템(자식요소) 중 하나의 값이 2인 경우 컨테이너의 빈 공간이 허락하는 한 해당 아이템(자식요소)은 다른 하나보다 두 배의 공간을 차지하려고 확장한다.

.container {
  flex-grow: 5;
}

flex-shrink:

flex-grow:와 대비되는 특징을 가지고 있다. 필요한 경우 플렉스 아이템(자식요소)이 축소되는 기능을 정의한다.

.container {
  flex-shrink: 2;
}

flex-basis:

flex-basis 속성은 플렉스 아이템(자식요소)의 초기 기본 크기를 설정한다. box-sizing으로 달리 설정하지 않는 한 콘텐츠 상자의 크기를 설정한다. 길이(예: 30%, 4rem , auto 등의 키워드).

이 값을 0으로 설정하면 해당 아이템(자식요소)의 주변의 추가 공간이 고려되지 않고 auto로 설정하면 추가 공간이 flex-grow 값에 따라 분배된다.

.container {
  flex-basis: 0%;
}

flex:

이것은 flex-grow, flex-shrink 및 flex-basis 항목을 통합해서 적용하기 위한 속성이다. 두 번째 및 세 번째 매개변수(flex-shrink 및 flex-basis)는 선택 사항이다. 기본값은 0 1 auto이지만 flex: 2 와 같이 단일 숫자 값으로 설정하면 flex-basis가 0%로 변경되므로 flex-grow: 2 플렉스-수축: 1 플렉스 기준: 0% 가 된다.

.container {
flex: flex-grow: 2; flex-shrink: 1; flex-basis: 0%;
}

align-self:

개별 플렉스 아이템(자식요소)에 대해 플렉스 컨테이너(부모요소)에 정의한 기본 정렬을 재정의할 수 있다.

.container {
  align-self: stretch;
}