Align Items

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 47번째.

CSS에서 align-items 속성은 플렉스 아이템이 교차축(주축의 반대 방향)을 따라 정렬되는 방식을 제어합니다. 이 속성은 행에서는 아이템을 수직으로, 열에서는 수평으로 배치하는 데 도움이 됩니다. 이 속성은 레이아웃을 더 유연하고 반응형으로 만드는 데 유용합니다.

align-items 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

.container {
    display: flex;
    align-items: value;
}

value: 교차 축(cross axis)을 따라 플렉스 아이템에 적용할 정렬 방식이며, 다음 중 하나일 수 있습니다:

stretch: 기본값입니다. 플렉스 아이템은 min-width/max-width 및 min-height/max-height를 준수하면서 교차 축을 따라 컨테이너를 채우도록 늘어납니다.

flex-start: 플렉스 아이템이 교차축의 시작 부분에 배치됩니다.

flex-end: 플렉스 아이템은 교차축의 끝에 배치됩니다.

center: Flex 아이템이 교차축을 따라 중앙에 정렬됩니다.

baseline: Flex 아이템들이 각자의 베이스라인에 맞춰 정렬됩니다.

예를 들어:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

이 예제에서 .container-start 요소는 플렉스 아이템을 교차축(cross axis)의 시작 부분에 정렬하고, .container-center 요소는 플렉스 아이템을 교차축을 따라 중앙에 정렬합니다.

챌린지

쉬움

두 개의 디비전(<div>)이 있고, 각 디비전이 세 개의 자식 디비전을 포함하고 있는 HTML 문서가 주어집니다.

아래 단계에 따라 진행하세요:

<strong>.seas</strong> 요소 스타일 지정:
- 클래스가 .seas인 <div> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
- 자식 요소의 유연한 배치를 위해 display를 flex로 설정합니다.
- 교차축(cross axis)의 중앙에 플렉스 아이템들을 정렬하기 위해 align-items 속성을 center로 설정합니다.
<strong>.oceans</strong> 요소 스타일 지정:
- 클래스가 .oceans인 <div> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
- 자식 요소의 유연한 배치를 위해 display를 flex로 설정합니다.
- 교차축(cross axis)의 끝에 플렉스 아이템들을 정렬하기 위해 align-items 속성을 flex-end로 설정합니다.

치트 시트

align-items 속성은 플렉스 아이템들이 교차축(주축의 반대 방향)을 따라 정렬되는 방식을 제어합니다:

.container {
    display: flex;
    align-items: value;
}

사용 가능한 값들:

stretch: 기본값. 아이템들이 컨테이너를 채우기 위해 늘어납니다.
flex-start: 아이템들이 교차축의 시작 부분에 배치됩니다.
flex-end: 아이템들이 교차축의 끝 부분에 배치됩니다.
center: 아이템들이 교차축을 따라 중앙에 배치됩니다.
baseline: 아이템들이 그들의 베이스라인(기준선)에 맞춰 정렬됩니다.

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

직접 해보기

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>