[CSS_study] display : flex 그리고align-self와 order

* flex box의 규칙

• flexbox에서는 children과 얘기하지 않는다.
  • box를 배치하고 class를 사용해서 box의 위치, 공간의 속성을 주어 묘사하지 않는다.
• flexbox에서 뭔가를 움직이고 싶을 때는 flexbox container를 만들어야한다.
  • inline-block와 같은 결과를 얻을 수 있다.
  • box의 부모가 flex container이다. 다른 것의 부모가 될 수 없고 바로 붙어있는 부모여야한다.
  • 항상 붙어있는 부모(father)가 자식(children)의 위치를 움직일 수 있다.

 

* flex의 세계에는 두 가지가 있다.

• row(행): 가로를 의미한다.
• column(열): 세로를 의미한다.

* flex container의 flex-direction 기본 값은 row다.

 

이때 row에 있는 item의 위치를 변경시키기 위해서는 justify-content를 사용하는데

수평 축에 있는 flex children의 위치를 변경한다. (flex container에서는 부모가 자식의 위치를 변경한다는 것)

 

(참고) align-center를 사용할 때는 반드시 flex container(부모)의 높이가 어느 정도 되는지 반드시 확인하자. 이미 item과 높이가 동일하여 위치를 변환시킬 수 없는 경우가 많기 때문이다.

box {
  display : flex;
  justify-content : center;
}

 

 

flex-start(default)	요소들을 컨테이너의 왼쪽으로 정렬
flex-end	요소들을 컨테이너의 우측으로 정렬
center	요소들을 컨테이너의 중앙으로 정렬
space-between	요소들 사이에 동일한 간격을 둡니다.
space-around	요소들 주위에 동일한 간격을 둡니다.
space-evenly(FireFox Only)	첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

* 수평 축을 main-axis

* 수직 축을 cross-axis

* flex-direction의 기본 값이 row일 때 수평축이 곧 main-axis다.

(다시 말해 가로가 곧 main-axis인 것이다.)

* 이때 main-axis에서 justify-content를 사용하면 item을 움직일 수 있는 것인데 main-axis가 수평축, 가로이기 때문에 가로로 item이 움직인다.

* 다른 axis로는 cross-axis가 존재한다. flex container가 row을 가질 때 cross-axis는 단어 그대로 가로지르기 때문에 수직(vertical)이다.
이때 cross-axis에서 item을 움직이기 위해서는 align-content를 사용한다. 수직, 세로로 움직이는 것이다.

 

* flex-direction속성에 따른 방향

• row방향일때 : main axis =가로(justify-content) / Cross axis=세로(align-items)
• column방향일때 : main axis=세로(justify-content) / Cross axis=가로(align-items)

 

 

* align-self와 order

* 부모가 아닌 자식 아이템의 위치(position)를 직접 변경하고 싶을 때는 align-self와 order를 사용한다.

(이때 유의할 점은 부모의 높이(heigth)가 설정되어 있어야 한다.)

align-self는 align-item과 같이 동작한다.

다시 말해 cross axis 방향에 있는 item의 위치를 바꾸게 된다.

order의 경우 단어 그대로 순서를 바꾼다.이때 기본 값(default)는 0이라 order를 1로 줄 경우 order를 주지 않은 것보다 뒤에 위치하게 된다.

(시각적으로는 순서가 변했으나 HTML에서는 순서가 바뀌지않는다.)

(HTML을 통해 순서를 바꾸기 힘들 때 사용하면 좋다.)

 

* align-self 예시코드

<div class="father">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
}

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

 

 

---

* order 예시 코드

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  font-size: 50px;
}

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

.child:nth-child(2) {
  order: 3;
}

 

 

* 3은 order : 0

* 1은 order : 2

* 2는 order : 3