justify-content 속성

justify-content 속성

justify-content항목이 주 축에 사용 가능한 모든 공간을 사용하지 않는 경우 속성은 수평으로 유연한 컨테이너의 항목을 정렬합니다.

가능한 값은 다음과 같습니다.

1. flex-start- 기본값. 항목은 컨테이너 시작 부분에 배치됩니다.

2. flex-end - 항목은 컨테이너의 끝에 배치됩니다.

3. center - 항목이 컨테이너의 중앙에 배치됩니다.

4. space-between - 항목은 줄 사이에 공백이있는 위치에 배치됩니다.

5. space-around - 항목은 줄 앞, 앞뒤 사이에 공백으로 배치됩니다.

다음 예제에서는 flex-end값 을 사용한 결과를 보여줍니다 .

예

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-justify-content: flex-end;

    justify-content: flex-end;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}