YIR Framework

Flexible

Flex 문장open in new window

아이템 배치(flex-direction)

flex-direction

flex-direction 속성은 CSS Flexbox 레이아웃에서 flex 컨테이너 내의 아이템들이 배치되는 주 축(main axis)의 방향을 정의합니다. 이 속성은 flex 아이템들이 수평 또는 수직 방향으로 어떻게 나열될지 결정합니다.

flex-direction 속성에는 다음과 같은 네 가지 값이 있습니다:

  1. row (기본값): 아이템들이 텍스트의 방향과 동일하게 행(row)을 따라 수평으로 배치됩니다. 보통 왼쪽에서 오른쪽으로 아이템이 나열됩니다.

  2. row-reverse: 아이템들이 row의 반대 방향으로 배치됩니다. 즉, 오른쪽에서 왼쪽으로 나열됩니다.

  3. column: 아이템들이 열(column)을 따라 수직으로 배치됩니다. 즉, 위에서 아래로 아이템이 나열됩니다.

  4. column-reverse: 아이템들이 column의 반대 방향으로 배치됩니다. 즉, 아래에서 위로 나열됩니다.

예시

.flex-container {
    display: flex;
    flex-direction: row; /* 아이템들을 수평 방향으로 배치 */
}

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

이 예시에서 .flex-container에 flex-direction: row;가 적용되어, 아이템들이 수평 방향으로 나열됩니다.

flex-direction 속성은 flexbox 레이아웃에서 매우 중요하며, 아이템들의 배치와 정렬 방식을 결정하는 데 사용됩니다. 이 속성을 조절함으로써, 다양한 화면 크기와 디바이스에 적합한 반응형 레이아웃을 구현할 수 있습니다.

아이템을 여러줄로 배치(flex-wrap)

flex-wrap

flex-wrap 속성은 Flexbox 레이아웃에서 flex 컨테이너 내의 아이템들이 한 줄에 모두 배치되어야 하는지, 아니면 여러 줄로 나눠질 수 있는지를 결정합니다.

flex-wrap 속성의 값

  1. nowrap (기본값): 모든 flex 아이템들이 한 줄에 배치됩니다. 필요하다면 아이템의 크기가 줄어들 수 있습니다.

  2. wrap: 아이템들이 너무 많아 한 줄에 모두 들어가지 않을 경우, 추가 아이템들은 새로운 줄(아래쪽)에 배치됩니다.

  3. wrap-reverse: wrap과 유사하지만, 아이템들이 반대 방향(위쪽)으로 새로운 줄에 배치됩니다.

예시

.flex-container {
    display: flex;
    flex-wrap: wrap; /* 아이템들이 필요한 경우 여러 줄로 나뉘어 배치됨 */
}

<div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <!-- 더 많은 아이템들 -->
</div>

이 예시에서 .flex-container에 flex-wrap: wrap;이 적용되어, 컨테이너의 너비를 초과하는 아이템들은 새로운 줄에 배치됩니다.

flex-wrap 속성을 사용함으로써, flex 컨테이너의 크기에 따라 아이템들이 적절하게 배치되도록 할 수 있으며, 이를 통해 반응형 레이아웃을 보다 효과적으로 구현할 수 있습니다.

주축 방향으로 아이템 정렬(justify-content)

justify-content

justify-content 속성은 CSS Flexbox 레이아웃에서 중요한 역할을 합니다. 이 속성은 flex 컨테이너 내부에서 아이템들이 주 축(main axis)을 따라 어떻게 정렬될지 결정합니다. 주 축은 flex-direction 속성에 따라 가로 또는 세로 방향이 될 수 있습니다.

justify-content 속성에 사용할 수 있는 값은 다음과 같습니다:

  1. flex-start: 아이템들이 컨테이너의 시작 부분(보통 왼쪽)에 정렬됩니다.

  2. flex-end: 아이템들이 컨테이너의 끝 부분(보통 오른쪽)에 정렬됩니다.

  3. center: 아이템들이 컨테이너의 중앙에 정렬됩니다.

  4. space-between: 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 위치하며, 나머지 아이템들은 사이에 동일한 간격으로 정렬됩니다.

  5. space-around: 모든 아이템들 주위에 동일한 간격이 배분됩니다. 각 아이템의 양쪽에 있는 공간이 동일하게 설정됩니다.

  6. space-evenly: 아이템들 사이, 그리고 컨테이너의 시작과 끝 부분 사이의 간격이 모두 동일하게 설정됩니다.

예시

.flex-container {
    display: flex;
    justify-content: space-between; /* 아이템들 사이에 공간을 균등하게 배분 */
}

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

이 예시에서는 .flex-container에 justify-content: space-between;을 적용하여, 첫 번째 아이템은 컨테이너의 시작 부분에, 마지막 아이템은 끝 부분에 위치하고, 중간 아이템은 두 아이템 사이에 균등하게 배치됩니다.

justify-content 속성은 flexbox 레이아웃을 사용하는 웹 페이지에서 아이템들의 정렬과 공간 분배를 세밀하게 조정하는 데 매우 유용합니다.

교차축 방향으로 아이템 정렬(align-items)

align-items

align-items 속성은 CSS Flexbox에서 매우 중요한 역할을 합니다. 이 속성은 flex 컨테이너 내의 아이템들이 크로스 축(cross axis)을 따라 어떻게 정렬될지 결정합니다. 크로스 축은 주 축(main axis)에 수직으로 교차하는 축을 의미하며, flex-direction 속성에 따라 달라집니다. 예를 들어, flex-direction이 row인 경우 크로스 축은 세로 축이고, column인 경우에는 가로 축입니다.

align-items 속성에 사용할 수 있는 주요 값은 다음과 같습니다:

  1. stretch (기본값): 아이템들이 flex 컨테이너의 크로스 축을 따라 늘어나도록 합니다. 즉, 아이템의 높이(또는 너비)가 컨테이너를 채우도록 조정됩니다.

  2. flex-start: 아이템들이 컨테이너의 시작 부분(주로 위쪽)에 정렬됩니다.

  3. flex-end: 아이템들이 컨테이너의 끝 부분(주로 아래쪽)에 정렬됩니다.

  4. center: 아이템들이 크로스 축을 따라 중앙에 정렬됩니다.

  5. baseline: 아이템들이 그들의 텍스트 기준선에 따라 정렬됩니다.

예시

.flex-container {
    display: flex;
    align-items: center; /* 아이템들을 세로 축을 따라 중앙에 정렬 */
}

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

이 예시에서 .flex-container에 align-items: center;를 적용하여, 모든 아이템들이 세로 축을 따라 중앙에 정렬됩니다.

align-items 속성은 flex 아이템들의 세로 정렬(또는 가로 정렬, flex-direction에 따라 다름)을 조정하는 데 중요한 역할을 합니다. 이를 통해 다양한 레이아웃 요구사항을 충족시키고, 사용자 인터페이스의 일관성과 가독성을 개선할 수 있습니다.

교차축 방향으로 아이템 개별적으로 정렬(align-self)

align-self

align-self 속성은 CSS Flexbox에서 개별 flex 아이템에 적용되며, 해당 아이템을 크로스 축(cross axis)에 따라 독립적으로 정렬합니다. 이 속성은 align-items 속성이 적용된 flex 컨테이너의 기본 정렬 설정을 덮어쓰고, 특정 아이템에 대해 다른 정렬 방식을 지정할 수 있습니다.

align-self 속성은 다음과 같은 값을 가질 수 있습니다:

  1. auto (기본값): 이 값은 flex 컨테이너의 align-items 속성의 값을 상속받습니다.

  2. flex-start: 아이템이 컨테이너의 시작 부분(주로 위쪽)에 정렬됩니다.

  3. flex-end: 아이템이 컨테이너의 끝 부분(주로 아래쪽)에 정렬됩니다.

  4. center: 아이템이 크로스 축을 따라 중앙에 정렬됩니다.

  5. baseline: 아이템이 그들의 텍스트 기준선에 따라 정렬됩니다.

  6. stretch: 아이템이 컨테이너의 크로스 축을 따라 늘어나도록 합니다. 즉, 아이템의 높이(또는 너비)가 컨테이너를 채우도록 조정됩니다.

예시

.flex-container {
    display: flex;
    align-items: flex-start; /* 기본 정렬 방식은 flex-start */
}

.flex-item-special {
    align-self: center; /* 특정 아이템만 중앙에 정렬 */
}

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

이 예시에서 .flex-container는 align-items: flex-start;로 설정되어 모든 아이템들이 컨테이너의 시작 부분에 정렬됩니다. 그러나 .flex-item-special 클래스가 적용된 "Item 2"만 align-self: center;로 설정되어 크로스 축의 중앙에 독립적으로 정렬됩니다.

align-self 속성은 유연한 레이아웃을 구성하고 개별 아이템의 정렬을 세밀하게 제어하는 데 유용합니다. 이를 통해 복잡한 레이아웃 요구사항을 쉽게 충족시킬 수 있습니다.

여러 줄로 아이템 정렬(align-content)

align-content 속성은 CSS Flexbox에서 다중 줄 flex 컨테이너 내부의 아이템들을 크로스 축(cross axis)을 따라 어떻게 정렬할지 결정합니다. 이 속성은 flex 컨테이너에 여러 줄의 아이템들이 있을 때 사용되며, 단일 줄의 경우에는 영향을 미치지 않습니다.

align-content 속성의 값

  1. stretch (기본값): 줄들이 컨테이너를 가득 채우도록 늘어납니다.

  2. flex-start: 줄들이 컨테이너의 시작 부분(주로 위쪽)에 정렬됩니다.

  3. flex-end: 줄들이 컨테이너의 끝 부분(주로 아래쪽)에 정렬됩니다.

  4. center: 줄들이 컨테이너의 중앙에 정렬됩니다.

  5. space-between: 첫 번째 줄은 컨테이너의 시작 부분에, 마지막 줄은 끝 부분에 위치하며, 나머지 줄들은 사이에 동일한 간격으로 정렬됩니다.

  6. space-around: 모든 줄 주위에 동일한 간격이 배분됩니다. 각 줄의 양쪽에 있는 공간이 동일하게 설정됩니다.

  7. space-evenly: 줄들 사이, 그리고 컨테이너의 시작과 끝 부분 사이의 간격이 모두 동일하게 설정됩니다.

예시

.flex-container {
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 나누기 위해 사용 */
    align-content: space-between; /* 줄 사이에 공간을 균등하게 배분 */
}

<div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <!-- 더 많은 아이템들로 여러 줄 생성 -->
</div>

이 예시에서 .flex-container는 flex-wrap: wrap;으로 설정되어 있어 여러 줄로 나뉩니다. align-content: space-between;은 이 여러 줄 사이에 균등한 간격을 만들어 줍니다.

align-content는 다중 줄 flex 레이아웃에서 크로스 축을 따라 줄들이 어떻게 정렬될지 제어하는 데 유용합니다. 이 속성을 통해 복잡한 레이아웃 요구사항을 충족시키고, 사용자 인터페이스의 일관성과 가독성을 개선할 수 있습니다.

아이템 순서 변경(order)

order

CSS Flexbox의 order 속성은 flex 컨테이너 내에서 개별 flex 아이템의 배치 순서를 정의합니다. 이 속성을 사용하면 HTML 구조를 변경하지 않고도 시각적인 아이템 순서를 조정할 수 있습니다. 각 flex 아이템에 order 속성을 지정함으로써, 그 순서를 컨트롤할 수 있습니다.

order 속성의 기본값과 사용법

  • 기본값: order 속성의 기본값은 0입니다. 모든 flex 아이템들은 기본적으로 order가 0인 것으로 간주되며, HTML 마크업에 따라 순서가 결정됩니다.

  • 사용법: order 속성에 정수 값을 지정할 수 있으며, 이 값에 따라 아이템들의 순서가 결정됩니다. 낮은 값이 먼저 배치되며, 같은 값을 가진 아이템들은 HTML 마크업에 따라 순서가 정해집니다.

예시

.flex-item1 {
    order: 2;
}

.flex-item2 {
    order: 1;
}

<div class="flex-container">
    <div class="flex-item1">Item 1</div>
    <div class="flex-item2">Item 2</div>
    <div>Item 3</div> <!-- order가 지정되지 않아 기본값 0을 가짐 -->
</div>

이 예시에서 .flex-item1은 order: 2;를 가지고, .flex-item2는 order: 1;을 가집니다. 따라서 "Item 2"가 "Item 1" 앞에 나오며, "Item 3"는 order가 지정되지 않아 기본값 0을 가지므로 가장 먼저 표시됩니다.

order 속성을 사용하면, 반응형 디자인에서 특히 유용하게 활용될 수 있으며, 다양한 디스플레이 크기 및 조건에서 콘텐츠의 시각적 순서를 유연하게 조정할 수 있습니다.

아이템 크기 확장(flex-grow)

flex-grow

flex-grow 속성은 CSS Flexbox 레이아웃에서 매우 중요한 역할을 합니다. 이 속성은 flex 컨테이너 내의 flex 아이템이 사용 가능한 공간에 대해 얼마나 늘어날 수 있는지를 정의합니다. 즉, flex-grow는 flex 아이템이 남은 공간을 어떻게 분할할지 결정합니다.

flex-grow 속성의 기능

  • 기본값: flex-grow의 기본값은 0입니다. 이는 기본적으로 flex 아이템이 추가 공간을 차지하지 않고, 자신의 콘텐츠 크기에 맞춰서 크기가 정해진다는 의미입니다.

  • 사용법: flex-grow에 0 이상의 값을 설정할 수 있으며, 이 값은 flex 아이템이 남은 공간을 어떻게 분할할지의 비율을 나타냅니다. 값이 클수록 더 많은 남은 공간을 차지하게 됩니다.

예시

.flex-container {
    display: flex;
}

.flex-item {
    flex-grow: 1;
}

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

이 예시에서 .flex-item에 적용된 flex-grow: 1;은 모든 아이템이 남은 공간을 동등하게 나눠 가진다는 것을 의미합니다. 결과적으로, 세 개의 아이템은 모두 동일한 비율로 늘어나서 컨테이너의 전체 공간을 채웁니다.

flex-grow 속성은 반응형 레이아웃을 구현하고, 다양한 화면 크기에서 콘텐츠를 유연하게 표시하는 데 유용합니다. 이 속성을 통해 flex 아이템들이 컨테이너 내에서 남는 공간을 어떻게 분할하고 차지할지 제어할 수 있습니다.

아이템 크기 축소(flex-shrink)

flex-shrink 속성은 CSS Flexbox 레이아웃에서 flex 컨테이너 내의 flex 아이템이 축소될 수 있는 정도를 정의합니다. 이 속성은 컨테이너의 공간이 부족할 때 아이템들이 어떻게 크기를 줄일지 결정합니다.

flex-shrink 속성의 기능

  • 기본값: flex-shrink의 기본값은 1입니다. 이는 flex 아이템이 필요에 따라 축소될 수 있음을 의미합니다.

  • 사용법: flex-shrink에는 0 이상의 값이 설정될 수 있으며, 이 값은 아이템이 축소될 때의 비율을 나타냅니다. 값이 클수록, 해당 아이템은 더 많이 축소됩니다.

예시

.flex-container {
    display: flex;
}

.flex-item {
    flex-shrink: 1; /* 기본값 */
}

.flex-item-no-shrink {
    flex-shrink: 0; /* 축소되지 않음 */
}

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

이 예시에서 첫 번째와 세 번째 아이템(.flex-item)은 flex-shrink: 1;로 설정되어 있어, 필요한 경우 크기가 줄어들 수 있습니다. 반면 두 번째 아이템(.flex-item-no-shrink)은 flex-shrink: 0;으로 설정되어 있어, 공간이 부족해도 축소되지 않습니다.

flex-shrink 속성은 반응형 레이아웃에서 아주 유용합니다. 이를 통해 화면 크기가 작아질 때 아이템들이 어떻게 축소될지 제어할 수 있으며, 레이아웃의 유연성을 향상시킬 수 있습니다.

아이템 초기 크기(flex-basis)

flex-basis 속성은 CSS Flexbox 레이아웃에서 flex 아이템의 초기 크기를 설정하는 데 사용됩니다. 이 속성은 아이템이 얼마나 공간을 차지할지의 기본값을 정의하며, flex 컨테이너 내에서 아이템이 늘어나거나 줄어들기 전의 기본 크기를 결정합니다.

flex-basis 속성의 기능

  • 기본값: flex-basis의 기본값은 auto입니다. 이는 아이템의 크기가 콘텐츠의 크기에 따라 결정됨을 의미합니다.

  • 사용법: flex-basis에는 길이(예: px, em, rem 등)나 백분율(%)을 설정할 수 있습니다. 또한 auto 값을 사용하여 아이템의 콘텐츠 크기에 따라 크기가 결정되도록 할 수도 있습니다.

예시

.flex-container {
    display: flex;
}

.flex-item {
    flex-basis: 200px; /* 아이템의 시작 크기를 200px로 설정 */
}

.flex-item-auto {
    flex-basis: auto; /* 아이템의 시작 크기를 콘텐츠 크기에 따라 결정 */
}

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

이 예시에서 첫 번째 아이템(.flex-item)은 flex-basis: 200px;로 설정되어 있어, 초기 크기가 200픽셀입니다. 두 번째 아이템(.flex-item-auto)은 flex-basis: auto;로 설정되어 있어, 콘텐츠의 크기에 따라 초기 크기가 결정됩니다.

flex-basis는 flex-grow 및 flex-shrink 속성과 함께 사용될 때 flex 레이아웃의 행동을 더 잘 이해하고 제어할 수 있도록 도와줍니다. flex-basis는 flex 아이템의 시작 크기를 설정하고, flex-grow와 flex-shrink는 이 크기를 기준으로 아이템이 어떻게 늘어나거나 줄어들지를 결정합니다.

Last Updated:
Contributors: RiGang