본문 바로가기

Webstoryboy

Category

Explanation

CSS/Alphabet

align-content

align-content

align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.


align-content

align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.

특징 설명
기본 값 align-content : stretch
적용 flexbox
버전 CSS3
사용성 ★★★☆☆

정의(Definition)

  • align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
  • align-content 속성은 한 줄(flex-wrap: nowrap)에서는 의미가 없습니다.

참고(Reference)

  • flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다.
  • flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자식 요소인 아이템(Item)으로 구성됩니다.
  • 플렉스 컨테이너에는 flex-direction, flex-wrap, justify-content, align-items, align-content가 있습니다.
  • 플렉스 아이템에는 flex, flex-grow, flex-shrink, flex-basis, align-self, order가 있습니다.

Flex와 관련된 속성(Flex Related Properties)

  • align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
  • align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
  • align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.
  • flex 속성은 콘텐츠의 성질을 flex로 설정합니다.
  • flex-basis 속성은 콘텐츠 아이템의 기본 값을 설정합니다.
  • flex-direction 속성은 콘텐츠 아이템의 정렬 방향을 설정합니다.
  • flex-flow 속성은 콘텐츠 아이템의 정렬 방향과 줄 속성을 설정합니다.
  • flex-grow 속성은 콘텐츠 아이템의 크기를 숫자를 통해 확대 설정합니다.
  • flex-shrink 속성은 콘텐츠 아이템의 크기를 숫자를 통해 축소 설정합니다.
  • flex-wrap 속성은 콘텐츠 아이템의 줄 속성을 설정합니다.
  • justify-content 속성은 콘텐츠 아이템의 좌우 관계 정렬 상태를 설정합니다.
  • order 속성은 콘텐츠 아이템의 순서를 설정합니다.

문법(Syntax)

align-content : stretch | center | flex-start | flex-end | space-between | space-around

/* 기본 속성 */
align-content : stretch
align-content : center
align-content : flex-start
align-content : flex-end
align-content : space-between
align-content : space-around

속성(Property)

속성값 설명
stretch 요소의 정렬 상태를 기본으로 설정합니다.
center 요소의 상하 정렬 상태를 가운데로 설정합니다.
flex-start 요소의 상하 정렬 상태를 위쪽으로 설정합니다.
flex-end 요소의 상하 정렬 상태를 아래쪽으로 설정합니다.
space-between 요소와 요소사이의 간격을 위쪽과 아래쪽을 기준으로 설정합니다.
space-around 요소와 요소사이의 간격을 가운데를 기준으로 설정합니다.
inherit align-content의 속성 값을 상위요소한테 상속받습니다.

예제1(Sample)

콘텐츠 아이템의 상하관계 정렬 상태를 설정하는 예제입니다.
아이템
박스크기
HTML
CSS
SCRIPT
<div class="flex-box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
.flex-box {
    display: flex;
    flex-wrap: wrap;
    align-content : stretch
    min-height: 300px;
}
.flex-box .item {
    width: 100px;
    height: 100px;
    background-color: #a2cbfa;
    margin: 1%;
}
//Javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
align-content

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기