Notice
Recent Posts
Recent Comments
Link
beepbeep
flex-item 전용 속성 본문
1) order : flex-container 내부의 item이 main-axis방향으로 배치되는 순서를 지정하는 속성
예) order : 1
기본값 0, 정수만 가능함(양수, 음수 가능)
2) flex-grow : item이 flex-container 내부에서 비어있는 공간을 메꿀 수 있도록 팽창하는 정도를 지정하는 속성
예) flex-grow: 4;
* 기본값 : 0
* 여러 item에 지정한 경우, 각 item의 크기에 비례해서 팽창함
3) flex-shrink : flex-container가 줄어들 때 내부 item의 수축 정도를 지정하는 속성
예) flex-shrink: 0;
* 기본값 : 1
* 여러 item에 지정한 경우, 각 item의 크기에 비례해서 수축함
* flex-wrap: nowarp 인 경우에만 적용 가능함
4) flex-basis : main-axis 방향으로 item이 차지하는 크기를 지정하는 속성
* 가로, 세로 상관 없이 비율에 맞체 변화함
* 각종 크기 단위 사용 가능 (px, %, vh, em, rem 등)
예) flex-basis: 10%
5) flex : grow, shrink, basis를 한번에 설정
예) flex: 0 0 10%;
6) align-self : item별로 cross-axis 배치를 지정하는 속성
적용법은 align-item과 동일
'HTML, CSS' 카테고리의 다른 글
3차원 변형하기 (0) | 2022.10.18 |
---|---|
transition (0) | 2022.10.18 |
CSS flex (0) | 2022.10.11 |
CSS 선택자 우선순위 (0) | 2022.10.10 |
CSS 선택자(Selector) - (3) 가상 클래스 선택자 (0) | 2022.10.10 |