저번에 정리했던 내용을 다시 되짚어보자
justify는 메인축을 중심으로 수평 방향으로 정렬 하고 align은 교차축을 중심으로 수직 방향으로 정렬한다.
이를 토대로 여러가지 flex-container 속성들을 살펴보았는데 이번에는 flex-item 속성들을 정리 해보도록 하겠다.
2. Flex Item
2-1. flex-basis
.item {
flex-basis: auto; /* 기본값 */
flex-basis: 0;
flex-basis: 50%;
flex-basis: 300px;
flex-basis: 10rem;
flex-basis: content;
}flex 아이템의 기본 크기를 설정한다 (height, width)
width를 따로 설정하지 않으면 컨텐츠의 크기로 맞춰진다
content 가 많으면 overflow 가 된다
width < flex-basis
예측이 불가한 속성 중 하나기 때문에 잘 안쓴다고 한다
2-2. flex-grow
기본값이 0 이다
아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고,
원래의 크기보다 커지며 빈 공간을 메우게 된다
flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각 해야함
2-3. flex-shrink
기본값이 1 이다
flex-grow와 쌍을 이루는 속성
아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고,
flex-basis보다 작아진다
활용
-
flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에
고정폭의 컬럼을 쉽게 만들 수 있다
-
위의 그림에서 flex-shrink: 0; 덕분에 컨테이너가 아무리 작아져도
첫번째 아이템은 찌그러지지 않고 폭이 100px로 유지된다.
-
2-4. flex
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성
flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 된다
여백의 비가 아닌, 영역 자체를 원하는 비율로 분할하기를 원한다면 flex-basis을 0으로 두고 활용 가능
2-5. align-self ㅣ 수직축으로 아이템 정렬
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}기본값은 auto / align-items 설정을 상속 받는다
align-items는 전체 아이템의 수직축 방향 정렬, align-self는 해당 아이템의 수직축 방향 정렬
auto외의 나머지 값들은 align-items와 동일하다
align-items < align-self
(전체보단 개별에 우선권을 더 준다)
2-6. order ㅣ 배치순서
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
---> B C A 순서로 화면에 표시-
각 아이템들의 시각적 나열 순서를 결정하는 속성
-
작은 숫자일 수록 먼저 배치
-
HTML 자체의 구조를 바꾸는 것이 아니다 X
-
시각 장애인분들이 사용하는 스크린 리더로 화면을 읽는다고 했을 때,
order를 이용해 순서를 바꾼 것은 의미가 없다고 봐야한다
-
2-6. z-index ㅣ Z축정렬
기본값은 0 이다
숫자가 클 수록 위로 올라온다
1로 설정해도 위로 올라오게 된다
엉금엉금