display:flex★
부모박스(container)안에 자식박스(item)를 정렬하는 속성.
flex를 적용하는 순간부터 자식박스는 가로로 정렬됨.
이때 자식박스의 가로 넓이의 총 합이 부모박스의 넓이를 넘게 되면
자식박스의 사이즈가 자동으로 줄어들며 부모박스를 채운다.
컨테이너에 flex가 적용되면 자식들을 다양하게 정렬하는 하위 정렬
속성들을 함께 사용할 수 있다.
★ display:flex속성은 부모박스에 적용해야 하며,
이에 따른 하위 정렬속성 또한 부모박스에 적용해야 한다.<하위 정렬 속성>
1. justify-content
부모박스안에 자식 박스들을 가로로 정렬할때 사용하는 속성.
- justify-content: flex-start;
: 기본값으로 부모박스안에 자식박스들을 왼쪽에서 오른쪽으로 정렬한다.
- justify-content: flex-end;
: 부모박스안에 자식박스들을 오른쪽에서 왼쪽으로 정렬한다.
- justify-content: center;
: 부모박스안에 자식박스들을 가운데로 정렬한다.
- justify-content: space-between;
: 부모박스 안에 자식박스들을 동일한 여백으로 양쪽 정렬한다.
- justify-content: space-around;
: 자식박스의 양옆으로 동일한 간격을 주어 정렬한다.
- justify-content: space-evenly;
: 부모박스안에 자식박스들을 고르게 동일한 간격으로 정렬한다.2. align-items
부모박스안에 있는 자식박스들을 세로로 정렬하는 속성이다.
부모박스를 기준으로 top/middle/bottom쪽으로 정렬한다.
- align-items: flex-start;
: 부모박스의 top위치로 자식박스들을 정렬한다.
- align-items: flex-end;
: 부모박스의 bottom위치로 자식박스들을 정렬한다.
- align-items: center;
: 부모박스의 middle위치로 자식박스들을 정렬한다.
- align-items: baseline;
: 자식박스들을 부모박스의 시작 위치에 정렬한다.
(= flex-start와 동일한 결과값)
- align-items: stretch;
: 자식박스를 부모박스의 높이에 맞춰 늘림. 이때 자식박스에는 height속성이 없어야 한다.flex, align-items 적용
Hi