css flex-box 응용 + order

flex-box 를 사용할때 main axis, cross axis를 기준으로 정렬 할 수 있다. 정렬하는 방법도 다양해서 하나씩 알아보도록 하자.

• 먼저 main axis를 정렬할때는 justify-content 를 사용한다
• cross axis 를 정렬할때는 align-items (or content) 를 사용해서 정렬한다.

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* main axis 방향으로 정렬 */
  justify-content: center; 
	
   /* 이런 VALUE 도 있음.*/
  /* justify-content: space-between; */
  /* justify-content: space-around; */

  /* cross axis 방향으로 정렬 */
  align-items: center;
  .
  .
}

• display: flex; 를 통해 parent 클래스 하위에 있는 자식 태그들을 특정 방향으로 나열 한다

• flex-direction: row; 는 가로 정렬

• flex-wrap: wrap; 를 사용해서 사이즈가 넘치면 다른 줄을 이용하도록 한다.

• 가로 정렬이기 때문에 justify-content: center; 는 main axis인 가로축을 가운데 정렬을 하라는 뜻이다.

• align-items: center; 는 자동적으로 세로축 (cross axis) 을 기준으로 가운데 정렬을 시킨다.

• 실행결과:
  

• 실행결과가 예상한대로 되질 않았다. 그 이유는 flex-wrap: wrap; 을 설정함으로써 새로운 축이 생겼기 때문이다. 아래 사진을 참고하자.
  

• (사진 퀄리티가...)

• 검은색 화살표가 cross axis고 빨간색 화살표가 red axis 이다.

• 그래서 각각 축에 따라서 정렬이 되니까 원하는 결과가 나오지 않는 것이다. 이때
  align-content: center; 를 사용하면 주축을 기점으로 정렬이 된다.

• 수정 결과:
  

order는 flex-box 가 제공하는 순서 기능

.red {
  order: 3;
  background-color: red;
}

.yellow {
  order: 2;
  background-color: yellow;
}

.blue {
  order: 1;
  background-color: blue;
}

• order: 1; 를 지정하면 순서대로 적용이 된다