Properties

Properties

Draft
  • account_tree
  • bug_report

justify-contentCSS3

Flex Layout에서 플렉스 컨테이너(flex container) 내 레이아웃 항목을 주축(main axis) 방향으로 정렬을 설정한다. Grid Layout에서는 로우축(row axis) 그리드 트랙(grid track)을 로우축(row axis) 방향으로 정렬을 설정한다.

설명

Flex Layout에서는 플렉스 컨테이너(flex container) 내 모든 레이아웃 항목의 주축(main axis) 방향 크기의 합이 부모 컨테이너보다 작은 경우에 정렬을 한다.

Grid Layout에서는 로우축(row axis) 그리드 트랙(grid track)의 크기가 그리드 컨테이너(grid container)보다 작을 경우에 정렬을 한다.

설정 가능한 값들은 많으나 웹브라우저 마다 지원 여부가 다르므로 반드시 확인이 필요하다.

설정 가능한 속성 값

  • flex-start키워드CSS3
    Flex Layout

    레이아웃 항목을 부모 요소에서 주축(main axis) 방향으로 콘텐츠 시작 위치에 정렬한다.

    Grid Layout

    그리드 트랙(grid track)을 그리드 컨테이너(grid container)에서 로우축(row axis) 방향으로 콘텐츠 시작 위치에 정렬한다.

  • flex-end키워드CSS3
    Flex Layout

    레이아웃 항목을 부모 요소에서 주축(main axis) 방향으로 콘텐츠가 끝나는 위치에 정렬한다.

    Grid Layout

    그리드 트랙(grid track)을 그리드 컨테이너(grid container)에서 로우축(row axis) 방향으로 콘텐츠가 끝나는 위치에 정렬한다.

  • normal키워드CSS3

    stretch 값과 동일한 결과처럼 처리한다.

  • start키워드CSS3
    Grid Layout

    그리드 트랙(grid track)을 그리드 컨테이너(grid container)에서 로우축(row axis) 방향으로 콘텐츠가 시작되는 위치에 정렬한다.

  • center키워드CSS3
    Flex Layout

    레이아웃 항목을 주축(main axis) 방향으로 부모 요소에서 가운데에 정렬한다.

    Grid Layout

    그리드 트랙(grid track)을 그리드 컨테이너(grid container) 로우축(row axis) 방향으로 가운데 위치에 정렬한다.

  • end키워드CSS3
    Grid Layout

    그리드 트랙(grid track)을 그리드 컨테이너(grid container) 로우축(row axis) 방향으로에서 콘텐츠가 끝나는 위치에 정렬한다.

  • left키워드CSS3
    Grid Layout

    로우축(row axis)에서 레이아웃 항목들이 왼쪽 가장자리에 맞추어 같은 높이를 정렬된다. 조건에 따라 start와 동일하게 동작한다고 명세에 설명이 있지만 현재로서는 조건과 관계없이 start와 동일하다.

  • right키워드CSS3
    Grid Layout

    로우축(row axis)에서 레이아웃 항목들이 오른쪽 가장자리에 맞추어 같은 높이를 정렬된다. 조건에 따라 end와 동일하게 동작한다고 명세에 설명이 있지만 현재로서는 조건과 관계없이 end와 동일하다.

  • space-between키워드CSS3
    Flex Layout

    각 플렉스 컨테이너(flex container)가 주축(cross axis)을 따라서 부모 요소 내에서 균등하게 배치된다. 각 플렉스 컨테이너(flex container)의 주축 방향 크기는 플렉스 컨테이너(flex container)의 레이아웃 항목중 최대 콘텐츠를 가지고 있는 크기에 맞춘다. 그리고 플렉스 컨테이너(flex container)내의 레이아웃 항목은 플렉스 컨테이너(flex container)에 맞추어 크기를 갖는다.

    Grid Layout

    컬럼축(column axis) 그리드 트랙(grid track)이 그리드 컨테이너(grid container) 안에서 로우축(row axis) 방향으로 균등하게 배치된다.

  • space-around키워드CSS3
    Flex Layout

    플렉스 컨테이너(flex container)가 주축(main axis)을 따라서 부모 요소 내에서 균등하게 배치된다. 각 플렉스 컨테이너(flex container)의 레이아웃 항목의 주축 방향 크기는 플렉스 컨테이너(flex container)의 레이아웃 항목중 최대 콘텐츠를 가지고 있는 크기에 맞춘다. 그리고 플렉스 컨테이너(flex container)내의 레이아웃 항목은 flex 컨테이너에 맞추어 크기를 갖는다.

    Grid Layout

    컬럼축(column axis) 그리드 트랙(grid track)이 그리드 컨테이너(grid container) 안에서 로우축(row axis) 방향으로 균등하게 배치된다. 그리고 로우축(row axis) 상에서 양쪽 끝에도 그리드 트랙(grid track) 내 인접 레이아웃 항목 간 간격의 1/2 간격을 갖는다.

  • space-evenly키워드CSS3
    Flex Layout

    space-around와 동일해 보이지만 주축(main axis) 상의 양쪽 끝의 flex 컨테이너가 갖는 간격이 인접 flex 컨테이너끼리 갖는 간격과 동일한 것이 다르다.

    Grid Layout

    space-around와 동일해 보이지만 로우축(row axis) 방향으로 양쪽 끝에 갖는 간격이 그리드 트랙(grid track)내 인접 레이아웃 항목간 갖는 간격과 동일한 것이 다르다.

  • initial키워드CSS3

    웹브라우저 기본 값으로 설정한다.

구문

  • justify-content flex-start or flex-end or center or space-between or space-around or initial;기본형식CSS3

테스트 도구

(1) Flex Layout에서의 justify-conent 속성 값 테스트

(2) Grid Layout에서의 justify-conent 속성 값 테스트

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저