Justify Content

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

CSS에서 justify-content 속성은 플렉스 컨테이너의 주축(main axis)을 따라 플렉스 아이템들이 배치되는 방식을 제어합니다. 이 속성은 아이템을 정렬하고 남은 공간이 있을 때 여유 공간을 분배하는 데 도움이 됩니다. 이 속성은 아이템을 가로(행) 또는 세로(열)로 배치하는 데 유용하며, 레이아웃을 더 유연하고 반응형으로 만들어 줍니다.

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

.container {
    display: flex;
    justify-content: value;
}

value: 주축을 따라 플렉스 아이템을 정렬하는 원하는 방식이며, 다음 중 하나일 수 있습니다:

flex-start: 이것은 기본값입니다. 아이템들이 라인의 시작 부분으로 배치됩니다.

flex-end: 아이템들이 라인의 끝부분으로 배치됩니다.

center: 항목들이 라인을 따라 중앙에 정렬됩니다.

space-between: 아이템들이 라인을 따라 고르게 배치되며, 첫 번째 아이템은 시작 지점에, 마지막 아이템은 끝 지점에 위치합니다.

space-around: 아이템들이 라인을 따라 고르게 배치되며, 각 아이템 주위에 동일한 간격이 배정됩니다.

space-evenly: 아이템들 사이의 간격과 양 끝 가장자리까지의 공간이 모두 동일하도록 아이템이 배치됩니다.

예를 들어:

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

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

챌린지

쉬움

세 개의 자식 디비전(<div>)을 포함하는 두 개의 디비전(<div>)이 있는 HTML 문서가 주어집니다. 부모 디비전은 이미 display: flex;를 사용하여 플렉스 컨테이너로 설정되어 있습니다. 여러분의 작업은 justify-content 속성을 사용하여 주축(main axis)을 따라 플렉스 아이템을 정렬하는 것입니다. 다음 단계를 따르세요:

fruits 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
.fruits 요소의 justify-content 속성을 center로 설정하여 주축을 따라 플렉스 아이템을 중앙에 정렬합니다.
vegetables 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
.vegetables 요소의 justify-content 속성을 space-between으로 설정하여 주축을 따라 플렉스 아이템을 고르게 분산시킵니다.

치트 시트

justify-content 속성은 플렉스 컨테이너의 주축(main axis)을 따라 플렉스 아이템들이 배치되는 방식을 제어합니다:

.container {
    display: flex;
    justify-content: value;
}

사용 가능한 값:

flex-start: 아이템들을 시작 부분으로 정렬 (기본값)
flex-end: 아이템들을 끝 부분으로 정렬
center: 아이템들을 라인의 중앙에 정렬
space-between: 아이템들을 고르게 분산, 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 배치
space-around: 아이템들 주변에 동일한 간격을 두어 고르게 분산
space-evenly: 모든 아이템 사이의 간격이 동일하도록 분산

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

직접 해보기

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>