Container 속성 - justify-content, align-items, align-content

Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

FE 개발자의 성장 기록👩‍💻

Container 속성 - justify-content, align-items, align-content 본문

HTML&CSS

Container 속성 - justify-content, align-items, align-content

yeeebin 2022. 10. 19. 20:36

justify-content, align-items, align-content는 컨테이너 속성이다.

세 속성의 차이점을 알아보자.

기본 세팅

<body>
    <div class="container">
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
        <div class="item">four</div>
    </div>
</body>

.container{
    border: 5px dashed orange;
    width: 300px;
    height: 200px;
    display: flex;
    /*
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-around;
    justify-content: space-between;
    */
}

.item{
    border: 2px solid pink;
    background-color: lemonchiffon;
    width: 50px;
    height: 50px;
    margin: 3px;
    font-weight: 700;
}

justify-content

: flex 컨테이너의 main 축 ( 주축 )을 기준으로 하는 정렬방법을 설정

현재 주축은 row ( 기본값 )이다. 따라서 가로 방향을 기준으로 정렬된다.

justify-content : flex-start; ( 기본값 )

→ 주축의 시작지점에 자식요소들이 정렬된다.

justify-content : flex-end;

→ 주축의 마지막지점에 자식요소들이 정렬된다.

justify-content : center;

→ 주축의 가운데 지점에 자식요소들이 정렬된다.

justify-content : space-around;

→ 모든 요소들이 주축 방향으로 정렬되며, 모든 요소들은 양쪽(주축 방향) 여백을 동일하게 차지한다.

justify-content : space-between;

→ 첫 요소와 마지막 요소는 부모 요소의 양 옆(주축 방향)에 여백없이 위치하며, 나머지 요소들은 양 옆 여백을 동일하게 차지하며 위치한다.

align-items & align-content

align-items와 align-content의 차이를 더 확실히 보기 위해 자식 요소를 2개 더 추가하고 flex-wrap을 wrap으로 설정하여 두 줄로 나타내보았다.

.container{
    border: 5px dashed orange;
    width: 300px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    /*
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    */
    /*
    align-content: flex-start;
    align-content: flex-end;
    align-content: end;
    align-content: space-around;
    align-content: space-between;
    */
}

.item{
    border: 2px solid pink;
    background-color: lemonchiffon;
    width: 50px;
    height: 50px;
    margin: 3px;
    font-weight: 700;
}