Skip to content

Latest commit

 

History

History
102 lines (73 loc) · 3.89 KB

flexbox.md

File metadata and controls

102 lines (73 loc) · 3.89 KB

Flexbox

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

Flex Container와 Flex Item

flexbox는 두 가지 개념을 기반으로 동작한다. 바로 flex container와 flex item이다. flex container는 display 속성 값으로 flex를 갖는 요소를 말하며, flex item은 flex container의 자식 요소를 말한다.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

위의 코드에서 .flex-container는 flex container이고, .flex-item은 flex item이다.

Flex Container에 대해서

Flex Container는 Flex Layout을 구현하기 위한 최상위 요소이며, Flex Container의 자식 요소로 다시 Flex Container를 포함할 수도 있기 때문에, 원하는 Layout을 구현하는 것이 가능합니다.

display

Flex Container를 정의하기 위해서는 display 속성을 사용해야 합니다. display 속성 값으로 flex를 사용하면 Flex Container로 정의됩니다.

.flex-container {
  display: flex;
}

flex-direction

flex-direction 속성은 Flex Container의 주축(main-axis)을 설정합니다. 주축은 Flex Item을 배치하는 방향을 설정하는데 사용됩니다. 기본값은 row입니다.

  • row: Flex Item을 수평축으로 배치합니다.
  • row-reverse: row와 같지만, Flex Item을 반대 방향으로 배치합니다.
  • column: Flex Item을 수직축으로 배치합니다.
  • column-reverse: column과 같지만, Flex Item을 반대 방향으로 배치합니다.
.flex-container {
  flex-direction: row;
}

flex-wrap

flex-wrap 속성은 Flex Item이 Flex Container의 크기에 맞게 줄을 바꿀지 여부를 설정합니다. 기본값은 nowrap입니다.

  • nowrap: Flex Item을 한 줄에 배치합니다.
  • wrap: Flex Item을 여러 줄에 배치합니다.
  • wrap-reverse: wrap과 같지만, Flex Item을 반대 방향으로 배치합니다.
.flex-container {
  flex-wrap: wrap;
}

flex-flow

flex-flow 속성은 flex-direction과 flex-wrap 속성을 한 번에 설정할 수 있습니다.

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

justify-content

justify-content 속성은 Flex Item을 Flex Container 내에서 정렬하는 방법을 설정합니다. 주축(main-axis)을 기준으로 동작합니다.

  • flex-start: Flex Item을 시작 부분에 정렬합니다.
  • flex-end: Flex Item을 끝 부분에 정렬합니다.
  • center: Flex Item을 가운데에 정렬합니다.
  • space-between: 첫 번째 Flex Item은 시작 부분에, 마지막 Flex Item은 끝 부분에 정렬되고, 나머지 Flex Item은 사이에 고르게 정렬됩니다.
  • space-around: 모든 Flex Item을 균등한 여백을 포함하여 정렬합니다.
.flex-container {
  justify-content: center;
}

align-items

align-items 속성은 Flex Item을 Flex Container 내에서 정렬하는 방법을 설정합니다. 교차축(cross-axis)을 기준으로 동작합니다.

  • flex-start: Flex Item을 시작 부분에 정렬합니다.
  • flex-end: Flex Item을 끝 부분에 정렬합니다.
  • center: Flex Item을 가운데에 정렬합니다.
  • baseline: Flex Item을 문자 기준선에 정렬합니다.
  • stretch: Flex Item을 교차축(cross-axis)에 맞게 늘립니다.
.flex-container {
  align-items: center;
}