플렉스 아이템을 비율대로 늘이거나 줄이기
플렉스 아이템 크기 조절하기
flex: [flex-grow][flex-shrink][flex-basis] (플렉스 아이템에 적용)
flex-grow : 플렉서블 박스에 여유공간이 있을경우 비율에 따라 플렉스 아이템 크기를 늘린다
ex) 1 1 2 : 여유공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에 더한다 (=layout_weight)
flex-shrink : 플렉서블 박스가 넘칠경우 비율에 따라 플렉스 아이템 크기를 줄인다
ex) 1 1 2 : 넘치는공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에서 뺀다
flex-basis : 플렉스 아이템의 기본크기를 설정
ex) 0 : flex-grow, flex-shrink 에서 설정한 비율 적용
ex) auto : 기본크기 그대로 적용
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | @charset "utf-8"; /** 플렉스 아이템 크기 조절하기 flex: [flex-grow][flex-shrink][flex-basis] (플렉스 아이템에 적용) flex-grow : 플렉서블 박스에 여유공간이 있을경우 비율에 따라 플렉스 아이템 크기를 늘린다 ex) 1 1 2 : 여유공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에 더한다 (=layout_weight) flex-shrink : 플렉서블 박스가 넘칠경우 비율에 따라 플렉스 아이템 크기를 줄인다 ex) 1 1 2 : 넘치는공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에서 뺀다 flex-basis : 플렉스 아이템의 기본크기를 설정 ex) 0 : flex-grow, flex-shrink 에서 설정한 비율 적용 ex) auto : 기본크기 그대로 적용 */ /* 플렉스 아이템을 1:1:2 비율로 크기 조절 */ /* 전체박스 */ #wrap { display: flex; width: 90%; height: 300px; margin: 0 auto; border: 4px solid #00f; } /* 첫번째 아이템 */ #wrap div:first-child { flex: 1 1 0; background: #eb4a24; } /* 두번째 아이템 */ #wrap div:nth-child(2) { flex: 1 1 0; background: #1488c8; } /* 마지막 아이템 */ #wrap div:last-child { flex: 2 2 0; background: #f7e041; } | cs |
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <!-- css 파일 임포트 --> <link rel="stylesheet" href="04-8.css" /> <title>Insert title here</title> </head> <body> <div id="wrap"> <div></div><div></div><div></div> </div> </body> </html> | cs |
결과
플렉스 아이템을 1:1:2 비율로 크기 조절
'IT > - 프로그래밍' 카테고리의 다른 글
| 안드로이드 화면 가로, 세로 구하기(pixcel, dpi, inch) (0) | 2016.08.29 |
|---|---|
| 반응형웹 목업 웹사이트 예제 (0) | 2016.08.28 |
| 반응형웹 플렉스 아이템 배치 순서 바꾸기 (0) | 2016.08.28 |
| 반응형웹 여러줄 플렉스 아이템을 교차축 방향으로 다양하게 배치하기 (0) | 2016.08.28 |
| 반응형웹 교차축 방향으로 플렉스 아이템 개별 배치하기 (0) | 2016.08.28 |