(본 글은 1분코딩님의 https://studiomeal.com/archives/197를 참조하였습니다.)
- flex-basis ( 유연한 박스의 기본 영역 )
.item { flex-basis: auto; /* 기본값 */ /* flex-basis: 0; */ /* flex-basis: 50%; */ /* flex-basis: 300px; */ /* flex-basis: 10rem; */ /* flex-basis: content; */ }
: Flex Item의 기본 크기를 설정합니다. (flex-direction이 row -> width
column -> height)
- auto일 때는 content의 크기로 된다.
- 100px으로 설정하면, 100px이 안되면 100px이 되고, 넘으면 그대로 유지!
- width : 100px; 으로 하면 모두다 100px으로 된다.
- flex-grow ( 유연하게 늘리기 )
.item { flex-grow: 1; /* flex-grow: 0; */ /* 기본값 */ }
: flex-basis보다 커질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)
- 숫자의 의미는 flex-basis를 제외한 여백 부분을 나누는 비율을 의미한다.
/* 1:2:1의 비율로 세팅할 경우 */ .item:nth-child(1) { flex-grow: 1; } .item:nth-child(2) { flex-grow: 2; } .item:nth-child(3) { flex-grow: 1; }
- flex-shrink ( 유연하게 줄이기 )
.item { flex-basis: 150px; flex-shrink: 1; /* 기본값 */ }
: flex-basis보다 작아질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)
- 기본값이 1이기 때문에 flex-basis보다 작아질 수 있다.
- flex ( basis + grow + shrink )
.item { flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */ flex: 1 1 auto; /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */ flex: 1 500px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */ }
: flex-basis + flex-grow + flex-shrink 한번에 사용하는 속성
- 여백의 비가 아닌 영역 자체를 원하는 비율로 분할하기 위해서는 flex-basis를 0으로 한다!
.item { flex: 1 1 0; } .item:nth-child(2) { flex: 2 1 0; }
- align-self ( 수직축으로 아이템 정렬 )
.item { align-self: auto; /* align-self: stretch; */ /* align-self: flex-start; */ /* align-self: flex-end; */ /* align-self: center; */ /* align-self: baseline; */ }
: Item 하나하나 각각 개별에 대해 수직축으로 정렬을 시키는 속성
(Container의 전체 아이템 수직 정렬인 align-items보다 우선순위이다!)
- order ( 배치 순서 )
.item:nth-child(1) { order: 3; } /* A */ .item:nth-child(2) { order: 1; } /* B */ .item:nth-child(3) { order: 2; } /* C */
: 각 아이템들의 시각적 나열순서를 결정하는 속성
- z-index ( Z축 정렬 )
.item:nth-child(2) { z-index: 1; transform: scale(2); } /* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */
: z축으로 정렬을 할 수 있다. (1만 설정해도 나머지 아이템보다 위로 올라온다!)