플렉서블 레이아웃 부모 속성 part2 - by. UXKM

  • Publishing
  • CSS
  • CSS 고급
  • 플렉서블 레이아웃 부모 속성 part2
요약 설명

Flex(Flexbox)는 CSS3에서 도입된 레이아웃 방식으로, 요소의 크기가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 구현할 수 있습니다.
플렉스 컨테이너(부모 요소)와 플렉스 요소(자식 요소)로 구성되며, display: flex 또는 display: inline-flex로 설정한 요소가 플렉스 컨테이너가 됩니다.

복잡한 레이아웃도 적은 코드로 간단하게 표현할 수 있으며, 다양한 화면 크기와 기기에서 요소들이 자동으로 재정렬되어 반응형 웹을 구현하는 데 유용합니다.
과거에는 float이 주로 사용되었지만, 현재는 flex 또는 grid가 주로 사용됩니다.

요약 설명

플렉서블 레이아웃 - 부모 속성 part 2에서는

  • justify-content
  • align-content
  • align-items에 대한 내용을 다루고 있습니다.

부모 속성(Properties for the Parent - Flexbox Container)

display: flex;를 설정한 요소입니다.

[Flexbox Container]
Flexbox Container

justify-content

justify-content 속성은 주축(main axis)을 따라 플렉스 요소를 정렬하는 방식을 설정합니다.
기본 값은 flex-start입니다.

w3.org/TR/css-flexbox-1/#justify-content-property

[justify-content를 시각적으로 설명하는 다이어그램]
justify-content를 시각적으로 설명하는 다이어그램 justify-content를 시각적으로 설명하는 다이어그램

  1. flex-start (기본값)

    기본값이며, 플렉스 요소가 플렉스 컨테이너의 앞쪽(왼쪽)부터 배치됩니다.

    justify-content: flex-start;
    flex-justify-content: flex-start;

  2. flex-end

    플렉스 요소가 플렉스 컨테이너의 뒤쪽(오른쪽)부터 배치됩니다.

    justify-content: flex-end;
    flex-justify-content: flex-end;

  3. center

    플렉스 요소가 플렉스 컨테이너의 가운데에 배치됩니다. (Items를 가운데 정렬 항목이 선을 따라 중앙에 위치)

    justify-content: center;
    flex-justify-content: center;

  4. space-between

    플렉스 요소 사이에 여유 공간을 두고 양쪽 끝에 마춰 배치됩니다.
    (시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됩니다. 라인에 균등하게 분배)

    justify-content: space-between;
    flex-justify-content: space-between;

  5. space-around

    플렉스 요소의 양 옆에 동일한 여유 공간을 두고 배치됩니다.
    (Items를 균등한 여백을 포함하여 정렬합니다. 항목은 동일한 간격으로 줄에 균등하게 분배)

    justify-content: space-around;
    flex-justify-content: space-around;

  6. space-evenly

    플렉스 요소의 사이의 양쪽 간격이 동일하게 배치됩니다.

    justify-content: space-evenly;
    flex-justify-content: space-evenly;

justify-content 예제

align-content

flex container의 교차 축(cross-axis)을 기준으로 flex item을 수직 정렬합니다.
참고로 justify-content 속성은 flex container의 main axis를 기준으로 flex item을 수평 정렬합니다.

주의할 점은 flex item이 한 줄일 경우 작동하지 않으며, 2줄 이상에 flex container에 여백이 있는 경우에만 의미가 있습니다.
또한 flex-wrap 속성에 nowrap이 선언되어 있으면 flex item이 한 줄로 정렬되기 때문에 이 경우에도 의미가 없습니다.
flex item이 한 줄일 경우 align-items 속성을 사용해야 합니다.

w3.org/TR/css-flexbox-1/#align-content-property

[align-content를 시각적으로 설명하는 다이어그램]
align-content를 시각적으로 설명하는 다이어그램 align-content를 시각적으로 설명하는 다이어그램

  1. stretch (기본값)

    기본값이며, flex container의 교차 축을 채우기 위해 flex Items을 늘립니다.

    align-content : stretch;
    align-content : stretch;

  2. flex-start

    flex Items을 시작점(위쪽) 기준으로 정렬합니다.

    align-content : flex-start;
    align-content : flex-start;

  3. center

    flex Items을 flex container 교차축 기준 가운데로 정렬합니다.

    align-content : center;
    align-content : center;

  4. flex-end

    flex Items을 끝점(아래쪽) 기준으로 정렬합니다.

    align-content : flex-end;
    align-content : flex-end;

  5. space-between

    flex Items이 위/아래 기준 양쪽 끝에 정렬되고 나머지 flex Items은 위/아래 사이 공간에 고르게 정렬됩니다.

    align-content : space-between;
    align-content : space-between;

  6. space-around

    flex Item의 각 행이 동일한 여유공간을 두고 정렬됩니다. (중간의 행은 더 큰 여유공간이 있는 것처럼 보여집니다.)

    align-content : space-around;
    align-content : space-around;

  7. space-evenly

    flex Item의 각 행이 flex container의 여백을 균등하게 나누어 정렬됩니다.

    align-content : space-evenly;
    align-content : space-evenly;

align-content 예제

align-items

align-items는 flex container에 지정하는 속성이며, flex container의 교차축(세로)을 기준으로 flex item을 정렬합니다. align-items 속성은 모든 flex item에 적용됩니다. (align-items 속성은 모든 직속 자식의 align-self를 지정합니다.)

align-items 속성은 플렉스박스에서는 교차 축을 기준으로 아이템을 정렬하고, 그리드 레이아웃에서는 각 아이템의 그리드 영역 내에서 블록 축을 기준으로 정렬합니다.

w3.org/TR/css-flexbox-1/#propdef-align-items

[align-items를 시각적으로 설명하는 다이어그램]
align-items를 시각적으로 설명하는 다이어그램 align-items를 시각적으로 설명하는 다이어그램

  1. stretch (기본값)

    기본값이며, 모든 flex item은 flex container의 높이(cross start에서 cross end까지의 높이)에 꽉찬 높이를 갖습니다.
    (flex container의 교차 축을 채우기 위해 Items를 늘립니다.)

    align-items: stretch;
    align-items : stretch;

  2. flex-start

    모든 flex item은 flex container의 cross start(위쪽) 기준으로 정렬됩니다.

    align-items: flex-start;
    align-items : flex-start;

  3. center

    모든 flex item은 flex container의 교차축(cross axis) 기준 중앙에 정렬됩니다.

    align-items: center;
    align-items : center;

  4. flex-end

    모든 flex item은 flex container의 cross end(아래쪽) 기준으로 정렬됩니다.

    align-items: flex-end;
    align-items : flex-end;

  5. baseline

    모든 flex item은 문자 기준선에 마춰 정렬됩니다.

    align-items: baseline;
    align-items : baseline;
    align-items : baseline;

align-items 예제