CSS - align-self , order

align-self

 

HTML

<div class="page">
  <div style="background-color:tomato;">1</div>
  <div style="background-color:#F7E212;">2</div>  
  <div style="background-color:green;">3</div>
</div>

CSS

.page {
  width: 220px;
  height: 300px;
  border: 3.5px solid gray;
  display: flex;
  align-items: flex-start;
  color : white;
}

.page div {
  flex: 1;
  justify-content: center;
  border: 2px solid gray;
}

.page div:nth-child(2) {
  align-self: center;
}

1

2

3

 

 

order

>> 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정

>> default 값 = 0

>> 음수값을 지정할 경우 default값보다 앞에 위치

 

노란색 배경으로 처리한 두 번째 flex-item의 순서를 변경합니다.

.a>:nth-child(2){ order:0 } // default

1

2

3

.b>:nth-child(2){ order:1 }

1

2

3

.c>:nth-child(2){ order:2 } // 다른 아이템의 order가 모두 '0'이므로 결과는 '1'과 같음.

1

2

3

.d>:nth-child(2){ order:-1 }

1

2

3

.e>:nth-child(2){ order:-2 } // 다른 아이템의 order가 모두 '0'이므로 결과는 '-1'과 같음.

1

2

3