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

요약 설명 플렉서블 레이아웃 - 부모 속성 part 2 에서는
- justify-content
- align-content
- align-items
 에 대한 내용을 다루고 있습니다.

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

display: flex;를 설정한 엘리먼트 입니다

[Flexbox Container]
Flexbox Container

justify-content

justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정합니다. (컨테이너의 항목을 기본 축을 따라 정렬하는 속성)
justify-content 속성은 주축을 따라 flex 항목 행을 정렬하는 방식을 지정합니다.
기본 값은 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를 지정합니다.)

플렉스박스에서는 아이템의 교차 축 정렬을 지정하고, 그리드 레이아웃에서는 아이템 각자의 그리드 영역 내 블록 축 정렬을 지정합니다.

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 예제