Flex Items

order

Flex Item의 순서를 설정

flex

flex-grow, flex-shrink, flex-basis의 단축 속성

😎 flex-grow : Flex Item의 증가 너비 비율을 설정
😎 flex-shrink : Flex Item의 감소 너비 비율을 설정
😎 flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정

align-self

교차 축(cross-axis)에서 Item의 정렬 방법을 설정

🥝 order

• Item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다.
• 음수가 허용된다.
• HTML구조와 상관없이 순서를 변경할 수 있다.
• order의 값이 같을 때는 HTML의 구조 순서에 따른다.
• 기본값 0

.container {
  border: 4px solid black;
  display: flex;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 4px solid gray;
  border-radius: 10px;
  background-color: coral;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1 {
  order: 1;
}
.item4 {
  order: 1;
}
.item6 {
  order: 1;
}