[CSS] justify-content, flex-direction

justify-content

1. display <flex 고정>

2. justify-content

3. align-items

 

justify 사용 조건

1. 적용시킬 엘리먼트를 하나의 부모로 감싼다.

<div class='container'>
    <div> 엘리먼트1 </div>
    <div> 엘리먼트2 </div>
</div>

 

2. 부모 엘리먼트에는 display: flex 속성이 반드시 존재해야 한다.

.container {
    display: flex;
    justify-content: space-between;
}

 

< 대표 속성 >

center : 중앙 정렬

space-between : 사이드 정렬

space-around : 두 엘리먼트에 일정한 간격을 준 정렬

 

flex-direction

< 대표 속성 >

column : 수직 정렬

column-reverse : 엘리먼트 순서가 반전된 수직 정렬

row : 수평 정렬

row-reverse : 엘리먼트 순서가 반전된 수평 정렬