✔️container가 아닌 Item에 사용할 수 있는 속성이다.
order
플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정한다.
-1, 0, 1 등의 integer로 순서를 매길 수 있다
[html]
<div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div>[css]
.item:nth-child(3) { order: -1; }= 3-1-2-4-5
=> 3이 -1로 매겨졌기 때문에 제일 앞으로 온다. 만약 0으로 매겨지면 순서가 그대로 1-2-3-4-5 이고, 1로 매겨지면 3이 맨 뒤로 간다.
❗️개발자 도구로 보면 순서가 그대로 1-2-3-4-5로 보여진다. html을 변경한게 아니라서 보여지는 곳에만 순서가 바뀌어 보인다.
flex-grow
flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다.
형제요소들이 같은 값을 할당 받으면, 화면이 늘어나서 공간이 많아질 때나 좁아져서 공간이 작아질 때 같은 비율로 커지거나 작아진다.
예를 들어, 이렇게 flex-grow를 1로, 모두 동일하게 적용했다면 모든 형제 요소들이 화면 크기에 맞게 동일하게 크거나 작아진다.
.item { flex-grow:1 }
반면, 형제요소들에게 다른 값을 주게될 때는 주어진 값에 따라 다른 비율로 변한다.
item:nth-child(2) { flex-grow: 2; } item:nth-child(3) { flex-grow: 1; }
⭐️ flex-grow는 동적인 메뉴나 네비게이션 바를 만들 때 유용하다.
⭐️ _보통 flex-grow를 사용할 때는, flex-shrink, flex-basis 속성을 함께 사용한다.
flex-shrink
flex-item 요소가 줄어드는 값을 설정하는 속성. (flex-grow의 반대되는 개념)
flex-shrink: 0;=> 줄어들지 않는다
flex-shrink: 2;=> 나머지 요소들이 0,1 이라고 가정했을 때, 이 요소의 줄어드는 정도가 1인 요소보다 더 크다.
flex-basis
flex-basis 값으로 설정한 만큼이 flex-item의 초기 크기가 된다.
🧩정리하자면!
초기값:
- flex-grow: 0
- flex-shrink: 1
- flex-basis: auto
align-self
.container에서 align-items: center;로 아이템들이 모두 가운데 정렬이 되어 있을 때, 어떤 특정 아이템만 위치를 바꾸고 싶다면?
.item:nth-child(4) { align-self: flex-end; }
