항목 정렬

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 47번째.

CSS에서 align-items 속성은 교차축(주축의 반대 방향)을 따라 플렉스 항목을 정렬하는 방식을 제어합니다. 이 속성을 사용하면 행에서는 항목을 세로로, 열에서는 가로로 배치할 수 있습니다. 이 속성은 레이아웃을 더 유연하고 반응형으로 만드는 데 유용합니다.

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

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

value: 교차축을 따라 플렉스 항목을 정렬하는 방식으로, 다음 중 하나일 수 있습니다.

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

flex-start: 플렉스 항목은 교차축의 시작 부분에 배치됩니다.

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

center: 플렉스 항목이 교차축을 따라 중앙에 배치됩니다.

baseline: 플렉스 항목은 기준선이 서로 정렬되도록 배치됩니다.

예를 들어:

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

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

이 예시에서 .container-start 요소는 교차축의 시작점에 플렉스 항목을 정렬하고, .container-center 요소는 교차축을 따라 플렉스 항목을 중앙에 정렬합니다.

챌린지

쉬움

각각 세 개의 자식 <div> 요소를 포함하는 두 개의 <div> 요소가 있는 HTML 문서가 주어집니다.

다음 단계를 따르세요.

.seas 요소 스타일 지정:
- .seas 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
- 자식 요소를 유연하게 배치할 수 있도록 display를 flex로 설정하세요.
- 교차축의 가운데에 플렉스 항목을 정렬하도록 align-items 속성을 center로 설정하세요.
.oceans 요소 스타일 지정:
- .oceans 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
- 자식 요소를 유연하게 배치할 수 있도록 display를 flex로 설정하세요.
- 교차축의 끝에 플렉스 항목을 정렬하도록 align-items 속성을 flex-end로 설정하세요.

직접 해보기

<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>