본문 바로가기

Webstoryboy

Category

Explanation

CSS/Alphabet

align-self

align-self

align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.


align-self

align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.

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

정의(Definition)

  • align-self 속성은 개별적인 플렉스 아이템의 정렬 상태를 설정합니다.
  • align-self 속성은 플렉스 아이템에 설정하고, align-item와 align-content는 플렉스 컨테이너에 설정합니다.

참고(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-self: auto | stretch | center | flex-start | flex-end | baseline

/* 기본 속성 */
align-self : auto
align-self : stretch
align-self : center
align-self : flex-start
align-self : flex-end
align-self : baseline

속성(Property)

속성값 설명
auto 요소의 정렬 상태를 기본으로 설정합니다.
stretch 요소의 가로 영역 값을 최대로 설정합니다.
center 요소의 정렬을 가운데로 설정합니다.
flex-start 요소의 정렬을 시작점으로 설정합니다.
flex-end 요소의 정렬을 끝점으로 설정합니다.
baseline 요소의 정렬을 폰트를 기준으로 설정합니다.
inherit 요소의 속성 값을 상위 요소한테 상속받습니다.

예제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>
.flex-box {
    display: flex;
    flex-wrap: wrap;
    align-self: auto;
    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-items

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

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

유튜브 영상보기 바로가기