IT 강좌 CSS 기초 032_플렉스 레이아웃 Flex

플렉스 레이아웃 Flex

오랜 기간 동안 CSS 레이아웃에서 유일하게 신뢰할 수 있고 브라우저 간 호환되는 생성 도구는 float와 position뿐이었습니다. 이 두 도구는 대부분의 경우 잘 작동하지만, 어떤 측면에서는 일정한 한계가 있어 작업을 완료하기 어렵게 만듭니다.

다음과 같은 간단한 레이아웃 요구사항은 이러한 도구(float와 position)로는 편리하고 유연하게 구현하기 어렵거나 불가능합니다:

부모 콘텐츠 내부에서 블록 콘텐츠를 수직으로 가운데 정렬하기.
사용 가능한 너비/높이가 얼마나 되든 컨테이너의 모든 자식 항목이 동일한 양의 사용 가능한 너비/높이를 차지하도록 하기.
다단 레이아웃의 모든 열이 포함된 콘텐츠 양이 다르더라도 동일한 높이를 갖도록 하기.

예제 효과

CSS의 Flex 레이아웃은 CSS의 강력한 레이아웃 도구로, 다양한 유연한 레이아웃을 만드는 데 사용할 수 있습니다. CSS의 Flex 레이아웃을 마스터하려면 다음과 같은 지식 포인트를 숙지해야 합니다:

Flex 컨테이너 (flex container): Flex 레이아웃은 Flex 컨테이너와 Flex 항목으로 구성됩니다. Flex 컨테이너는 Flex 항목을 Flex 레이아웃에 배치하는 컨테이너입니다. Flex 컨테이너는 어떤 요소든 될 수 있지만, 일반적으로 div 요소를 사용합니다.
Flex 항목 (flex item): Flex 항목은 Flex 컨테이너에 배치된 요소입니다. Flex 항목은 어떤 요소든 될 수 있지만, 일반적으로 div 요소를 사용합니다.
주축 (main axis): 주축은 Flex 레이아웃에서 요소의 수평 또는 수직 방향입니다.
교차축 (cross axis): 교차축은 Flex 레이아웃에서 요소의 수직 또는 수평 방향입니다.

Flex 컨테이너 속성

Flex 컨테이너는 Flex 레이아웃을 제어하기 위한 다음과 같은 속성을 가지고 있습니다:

display: Flex 컨테이너의 표시 모드를 설정합니다. Flex 컨테이너는 Flex 레이아웃을 사용하려면 display: flex 또는 display: inline-flex로 설정해야 합니다.
flex-direction: Flex 레이아웃의 주축 방향을 설정합니다. 값은 flex-start 주축 시작 정렬, flex-end 주축 끝 정렬, row 주축 수평 배열, row-reverse 주축 역방향 수평 배열, column 주축 수직 배열, column-reverse 주축 역방향 수직 배열이 될 수 있습니다.
flex-wrap: Flex 컨테이너 내의 항목이 줄 바꿈을 할지 제어합니다. nowrap 기본값, 줄 바꿈 안 함, wrap 줄 바꿈, wrap-reverse 역방향 줄 바꿈.
flex-flow: flex-direction과 flex-wrap의 약어로, 두 값이며 각각 flex-direction과 flex-wrap에 해당합니다.
justify-content: Flex 컨테이너의 Flex 항목이 주축 상에서 정렬되는 방식을 설정합니다. 값은 flex-start 주축 시작 정렬, flex-end 주축 끝 정렬, center 주축 중앙 정렬, space-between 주축 평균 정렬(컨테이너 양 끝 정렬), space-around 주축 평균 정렬(항목 간격 동일) 또는 space-evenly 주축 평균 정렬(양 끝 포함 간격 동일)이 될 수 있습니다.
align-items: Flex 컨테이너의 Flex 항목이 교차축 상에서 정렬되는 방식을 설정합니다. 값은 flex-start 교차축 시작 정렬, flex-end 교차축 끝 정렬, center 교차축 중앙 정렬, stretch 기본값 또는 baseline 교차축 첫 번째 줄 텍스트 베이스라인 정렬이 될 수 있습니다. Flex 컨테이너의 자식 항목에만 작용합니다.
align-content: align-items와 마찬가지로 자식 항목의 교차축 정렬 방식을 제어하는 속성으로, Flex 컨테이너가 여러 축선(다중 행 또는 다중 열 상황)을 가질 때만 효과가 있습니다.

Flex 항목 속성

Flex 항목은 Flex 레이아웃에서 Flex 항목의 레이아웃을 제어하기 위한 다음과 같은 속성을 가지고 있습니다:

flex-grow: Flex 항목의 주축 상의 신축 비율을 설정합니다. 값은 0에서 1 사이의 부동 소수점 수가 될 수 있습니다.
flex-shrink: Flex 항목의 주축 상의 수축 비율을 설정합니다. 값은 0에서 1 사이의 부동 소수점 수가 될 수 있습니다.
flex-basis: Flex 항목의 주축 상의 기본 너비 또는 높이를 설정합니다. 값은 길이 값, 백분율 값 또는 auto가 될 수 있습니다.
order: Flex 항목의 주축 상의 순서를 설정합니다. 값은 1에서 65535 사이의 정수가 될 수 있습니다.

예제:

1
/* Flex 컨테이너 스타일 */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* 주축 방향은 수평 */
5
    justify-content: space-around; /* 주축 상의 정렬 방식 */
6
    align-items: center; /* 교차축 상의 정렬 방식 */
7
    height: 200px; /* 컨테이너 높이 설정 */
8
    border: 2px solid #333; /* 더 나은 시각화 효과를 위해 테두리 추가 */
9
}
10
/* Flex 항목 스타일 */
11
.flex-item {
12
    flex: 1; /* 주축 공간을 균등 분할 */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Flex 컨테이너 -->
2
<div class="flex-container">
3
    <!-- Flex 항목1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Flex 항목2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Flex 항목3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

효과:

예제 효과

플렉스 레이아웃 Flex

댓글