반응형
CSS3에서 등장한 1차원 레이아웃 모델(행과 열만을 다룸)
화면 크기에 상관없이 웹 페이지의 레이아웃을 동일하게 유지하고 싶을 때 사용
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex</title> <style> html, body { height: 100%; } .father { height: 100%; display: flex; /* 플렉스 요소의 x축 방향 정렬 방식 설정, default: flex-start */ justify-content: space-around; /* 플렉스 요소의 y축 방향 정렬 방식 설정, default: stretch */ align-items: center; /* 플렉스 요소가 배치될 방향 설정, default: row */ flex-direction: column; } .box { width: 200px; height: 200px; background-color: red; text-align: center; font-weight: bolder; } .box:nth-of-type(odd) { background-color: yellow; } </style> </head> <body> <div class="father"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </body> </html> | cs |
※ flex는 부모 클래스에만 사용한다.
부모 태그(div.father) display 속성이 flex 라면, 자식 태그(div.box) display 속성이 inline-block 형태로 변경된다.
참고사이트▼
노마드 코더 - Nomad Coders
'CSS' 카테고리의 다른 글
| Clearfix Hack과 flow-root (0) | 2019.01.29 |
|---|---|
| Font Awesome (버전 4와 버전 5 사용 방법) (0) | 2019.01.04 |
| media query (0) | 2019.01.03 |
| animations (0) | 2019.01.03 |
| pseudo-class (0) | 2019.01.03 |
댓글