align-self 속성

align-self 속성은 개별적으로 지정된 플렉스 블록의 교차 축 정렬 및 그리드에서 개별 요소의 수직 축 정렬을 설정합니다. 본질적으로 이 속성은 align-items 속성을 특정 블록에 대해 적용하는 것과 같습니다.

구문

css선택자 {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

값

기본값: auto.

예시 . stretch 값

이 예시에서는 모든 블록에 flex-start 값이 지정되었습니다(align-items 속성). 세 번째 블록에는 align-self 속성에 stretch 값이 지정되었습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div id="elem">3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
  height: 100px;
}
#parent > div {
  min-width: 100px;
  border: 1px solid #696989;
}
#elem {
  align-self: stretch;
}

Результат:

예시 . flex-end 값

이 예시에서는 align-items 속성에 모든 블록에 대해 flex-start 값이 지정되었고, 세 번째 블록에는 align-self 속성에 flex-end 값이 지정되었습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div id="elem">3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
  height: 100px;
}
#parent > div {
  min-width: 100px;
  border: 1px solid #696989;
}
#elem {
  align-self: flex-end;
}

Результат:

예시 . 그리드에서 수직 축 시작점 정렬

첫 번째 요소를 수직 축의 시작점에 맞춰 정렬해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: start;
}

Результат:

예시 . 그리드에서 수직 축 중앙 정렬

첫 번째 요소를 수직 축의 중앙에 맞춰 정렬해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: center;
}

Результат:

예시 . 그리드에서 수직 축 끝점 정렬

그리드에서 첫 번째 요소를 수직 축의 끝점에 맞춰 정렬해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  align-self: end;
}

Результат:

함께 보기