7. align-content
플렉스된 컨테이너 안에 자식들이 매우 많을 경우 여러 줄이 형성된다.
(flex-wrap을 썼을 때)
이 때 한 줄을 하나의 content라고 표현한다.
align-content는 컨텐츠를 각각 세로로 정렬하고
요소사이에(between), 주위에(around), 고르게(evenly)
동일한 간격을 주어 배치할 수 있다.align-content 하위 속성들
- align-content : flex-start;
: 여러 줄을 컨테이너의 top위치에 배치한다.
- align-content : flex-end;
: 여러 줄을 컨테이너의 bottom위치에 배치한다.
- align-content : center;
: 여러 줄을 컨테이너의 middle위치에 배치한다.
- align-content : space-between;
: 여러 줄들을 양끝에 배치하고 줄 사이에 동일한 간격을 준다.
- align-content : space-around;
: 여러 줄들의 양옆에 동일한 간격을 주어 배치한다.
- align-content : space-evenly;
: 여러 줄 사이에 동일한 간격을 주어 배치한다.
- align-content : stretch;
: 여러 줄들을 컨테이너(부모박스)에 맞도록 늘린다.
단, height속성이 선언되지 않아야 한다.align-content 적용
아래 속성들은 반드시 자식박스에 적용해야 한다.
이 속성들은 부모박스에 flex가 적용되어 있어야만 쓸 수 있다.
1. order : 순서 변경 속성
order를 통해 flex안쪽에 자식요소의 순서를 바꿀 수 있다.
기본값은 0이며, 양수나 음수로 바꿀 수 있다.
작은 수일수록 나열 순서가 앞으로 온다.2. align-self : 개별요소를 세로로 정렬
자식박스를 개별적으로 세로로 정렬할때 사용하는 속성.
align-items에 적용하는 속성값들을 모두 똑같이 사용한다.
값을 지정한 해당 태그에만 적용된다.align-self 하위 속성들
- align-self : flex-start;
: 해당 요소를 컨테이너의 top위치로 정렬한다.
- align-self : flex-end;
: 해당 요소를 컨테이너의 bottom위치로 정렬한다.
- align-self : center;
: 해당 요소를 컨테이너의 middle위치로 정렬한다.
- align-self : baseline;
: 해당 요소를 컨테이너의 시작위치로 정렬한다.
(=기본값인 flex-start와 동일)
- align-self : stretch;
: 해당 요소를 부모박스 높이나 넓이에 맞춰 늘린다.order, align-self 적용
반응형을 만들때 많이 사용하는 가변단위들
1. % : 어떤 영역에서 어떤 비율만큼을 차지하는 단위
2. vw, vh : viewport width, viewport height의
약자이며, '보이는 화면'을 기준으로 백분율(%)하여 보여준다.
3. vmin, vmax : viewport 최대, 최소 넓이를 설정하는 단위
4. fr : 컨텐츠를 차지하는 비율. 1fr이고, 컨텐츠가 3개라면 부모영역을 1:1:1로 채운다.
첫 번째 컨텐츠가 2fr이고, 나머지 컨텐츠가 1fr이라면 2:1:1이 된다.
Hi