작성일/수정일
2021-07-05 22:47:02 / 2021-07-05 22:47:02
Flex 아이템에 적용하는 속성들
Flex-basis 유연한 박스의 기본 영역
flex-basis는 Flex 아이템의 기본 크기를 설정
.item {
flex-basis: auto; /* 기본값 */
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}
Flex-grow 유연하게 늘리기
flex-grow : 0; 기본값
flex-grow : 1; 빈공간을 메움,
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}
Flex-shrink 유연하게 줄이기
Flex-shrink는 flex-grow와 쌍을 이루는 속성, flex-baisis 값보다 작어질 수 있는 지 결정.
flex-shrink : 0; 자식공백이 flex-basis 보다 작아 지지 않음.
flex-shrink : 1; 기본값 자식공백이 유연하게 변경 flex-basis 보다 작아짐
.container {
display: flex;
}
.item:nth-child(1) {
flex-shrink: 0;
width: 100px;
}
.item:nth-child(2) {
flex-grow: 1;
}
Flex 축약형 소스
flex-grow, flex-shrink, flex-basis
.item {
flex: 1 1 0;
}
.item:nth-child(2) {
flex: 2 1 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 40%;
}
align-self 수직축으로 아이템 정렬
align-self 수직축 정렬~
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}
order 배치순서
자식요소의 시각적 나열 HTML 구조가 변경되는 것은 아님
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
Z-index
숫자가 올라갈 수록 위로 올라감
.item:nth-child(2) {
z-index: 1;
transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */
출처 : https://studiomeal.com/archives/197
