CSS Keywords

{object_name}

CSS Box Alignments

  • Baseline Position

    • baseline

      첫번째 기준선으로 계산한다. first baseline과 동일하다.
    • first baseline

      첫번째 기준선 정렬에 맞춘다.
    • last baseline

      마지막 기준선으로 정렬되도록 한다.
  • Content Distribution

    • space-around

      기본적으로 space-between와 동일하지만 양쪽 끝에도 형성된 간격의 1/2 간격을 각각 갖는다.
    • space-between

      정렬 대상은 정렬 컨테이너 안에서 고르게 배치된다. 첫번째 정렬 대상은 정렬 컨테이너의 시작 모서리와 같은 높이로 배치되고 마지막 정렬 대상은 정렬 컨테이너의 끝 모서리와 같은 높이로 배치된다. 나머지 정렬 대상은 시작과 끝 정렬 대상 사이에서 필요에 따라 간격이 균등하게 배분되어 배치된다.
    • space-evenly

      기본적으로 space-around와 동일하지만 첫번째 정렬 대상의 이전, 마지막 정렬 대상의 이후 간격과 첫번째 정렬 대상과 마지막 정렬 대상 사이의 간격이 정렬 컨테이너 내에서 균등하도록 배치한다.
    • stretch

      정렬 대상의 전체 차지하는 영역의 크기가 정렬 컨테이너의 크기보다 작은 경우 자동으로 비례적으로 늘려서 정렬 컨테이너에 꽉 차도록 한다.
  • Content Position

    • center

      정렬 컨테이너 내에서 정렬 대상들을 가운데 배치한다.
    • end

      적절한 축에서 정렬 컨테이너의 끝 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
    • flex-end

      플렉스(flex) 레이아웃에서만 사용된다. 필요에 따라 플렉스 컨테이너의 기본 끝 또는 교차 끝 측면에 해당하는 정렬 컨테이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
    • flex-start

      플렉스(flex) 레이아웃에서만 사용된다. 플렉스 컨테이너의 기본 시작 또는 교차 시작 측면에서 해당하는 정렬 컨텐이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
    • left

      정렬 컨테이너의 왼쪽 또는 실제 왼쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.
    • right

      정렬 컨테이너의 오른쪽 또는 물리적 오른쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.
    • self-end

      적절한 축에서 정렬 대상의  끝면에 해당하는 정렬 컨테이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
    • self-start

      적절한 축에서 정렬 대상의 시작 측면에 해당하는 정렬 컨테이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
    • start

      적절한 축에서 정렬 컨테이너의 시작 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
  • Gap

    • normal

      다중 열 컨테이너에서 사용된 값 1em을 나타내고 다른 모든 컨텍스트에서 사용된 값 0px를 나타낸다.
  • Overflow Position

    • safe

      정렬 대상의 전체 영역의 크기가 정렬 컨테이너 안에서 수용할 수 없으면 정렬 대상이 start 정렬 모드가 시작된 것 처럼 배치된다.
    • unsafe

      정렬 대상과 정렬 컨테이너의 상대적 크기에 관계없이 지정된 정렬 값이 적용된다.
  • Self and Items

    • auto

      이 키워드가 사용된 속성이 align-self일 경우에 상위 컨테이너의 계산된 align-items  값으로, justify-self일 경우에 상위 컨테이너의 계산된 justify-items값으로 작동한다.
    • legacy

      상속된 값으로 처리한다.
    • normal

      기본 위치로 설정한다.
    • stretch

      정렬 대상의 계산된 너비/높이(축에 적합한)가 자동이고 여백이 모두 자동인 경우 정렬 대상의 사용된 크기를 min-height/min-width/max-height/max-width로 부과되는 구속 조건을 유지하면서 가능한 정렬 컨테이너를 채우는데 필요한 길이로 설정된다.
  • Vertical Align

    • baseline

      상자의 기준선을 상위 상자의 기준선과 정렬한다. 상자에 기준선이 없다면 아래쪽 여백 가장자리를 상위 기준선에 맞춘다.
    • bottom

      정렬된 하위 트리의 하단을 라인 상자의 하단에 맞춘다.
    • middle

      상자의 수직 중간지점을 상위 상자의 기준선에 상위 상자의 x 높이의 절반을 더한 값에 맞춘다.
    • sub

      상자의 기준선을 부모 상자의 첨자에 대한 적절한 위치로 낮춘다. 요소의 텍스트의 글꼴 크기에 영향을 주지 않는다.
    • super

      부모 상자의 위 첨자에 대한 적절한 위치로 상자의 기준선을 올린다. 요소의 텍스트의 글꼴 크기에 영향을 주지 않는다.
    • text-bottom

      상자의 하단을 부모의 콘텐츠 영역 하단에 맞춘다.
    • text-top

      상자의 상단을 부모의 콘텐츠 영역 상단에 맞춘다.
    • top

      정렬된 하위 트리의 상단을 라인 상자의 상단에 맞춘다.