플렉서블 박스에 플렉스 아이템 가로방향으로 배치하기
플렉서블 박스 = 부모박스
플렉스 아이템 = 플렉서블 박스(부모박스) 의 자식 박스
주축방향 = 플렉스 아이템의 배치 방향
플렉서블 박스 속성
display: flex, inline-flex (모든요소에 적용)
flex : 박스를 블록 수준의 플렉서블 박스로 만든다
inline-flex : 박스를 인라인 수준의 플렉서블 박스로 만든다
플렉스 아이템의 배치방향 속성
flex-direction : row(기본값), row-reverse, column, column-reverse (플렉서블 박스에 적용)
row : 왼쪽 -> 오른쪽 배치
row-reverse : 오른쪽 -> 왼쪽 배치
column : 위 -> 아래 배치
column-reverse : 아래 -> 위 배치
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 41 42 43 44 45 46 47 48 49 50 | @charset "utf-8"; /** 플렉서블 박스 = 부모박스 플렉스 아이템 = 플렉서블 박스(부모박스) 의 자식 박스 주축방향 = 플렉스 아이템의 배치 방향 */ /** 플렉서블 박스 속성 display: flex, inline-flex (모든요소에 적용) flex : 박스를 블록 수준의 플렉서블 박스로 만든다 inline-flex : 박스를 인라인 수준의 플렉서블 박스로 만든다 플렉스 아이템의 배치방향 속성 flex-direction : row(기본값), row-reverse, column, column-reverse (플렉서블 박스에 적용) row : 왼쪽 -> 오른쪽 배치 row-reverse : 오른쪽 -> 왼쪽 배치 column : 위 -> 아래 배치 column-reverse : 아래 -> 위 배치 */ /* 전체박스 */ /* 플렉스 아이템을 왼쪽에서 오른쪽으로 배치 */ #wrap { display: -webkit-flex; /* -webkit : 웹킷 계열 전용 접두사 */ display: flex; flex-direction: row; width: 90%; height: 500px; margin: 0 auto; background: #eb4a24; border: 4px solid #000; } /** 자식박스 */ #wrap div { width: 33.3%; } /* 첫번째박스 */ #wrap div:first-child { background: #eb4a24; } /* 두번째박스 */ #wrap div:nth-child(2) { background: #1488c8; } /* 세번째박스 */ #wrap div:nth-child(3) { 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-1.css" /> <title>Insert title here</title> </head> <body> <div id="wrap"> <div></div><div></div><div></div> </div> </body> </html> | cs |
결과
가로방향(왼쪽에서 오른쪽)으로 플렉스 아이템이 동일한 너비로 배치된다
'IT > - 프로그래밍' 카테고리의 다른 글
| 반응형웹 주축 방향으로 다양하게 플렉스 아이템 배치하기 (0) | 2016.08.28 |
|---|---|
| 반응형웹 플렉스 아이템 배치방향과 플렉스 아이템을 여러줄로 배치하기 (0) | 2016.08.28 |
| 반응형웹 미디어쿼리 예제 - 화면너비에 따라 구조 변경하기 (1) | 2016.08.24 |
| 안드로이드 앱버전코드, 앱버전명 가져오기 (0) | 2016.08.23 |
| 안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기 (2) | 2016.08.22 |