플렉스 박스란?
- 플렉스 박스는 플렉스 컨테이너, 플렉스 요소로 구성됩니다.
- 요소를 블록 타입으로 설정하려면 display 속성값을 flex로, 인라인 타입으로 정의 하려면 inline-flex로 설정합니다.
- 플렉스 컨테이너는 무조건 하나 이상의 플렉스 요소를 포함해야 합니다.
- 플렉스 요소는 플렉스 라인이라는 가상의 선을 따라 위치합니다.
플렉스 박스(flex box) 레이아웃
플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.
이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다.
플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같습니다.
| display | 박스 타입 설정 |
| flex-direction | 요소들의 위치 방향을 설정(ex 좌->우) |
| justify-content | 요소의 수평 방향 정렬 방식 설정 |
| align-items | 요소의 수직 방향 정렬 방식 설정 |
| flex-wrap | 플렉스 라인 풀일 때 줄 바꿈 설정 |
| flex-flow | flex-direction 및 flex-wrap 이용한 스타일을 한 줄에 설정 가능 |
| align-content | flex-wrap 속성 동작 변경 가능 플렉스 라인 정렬 |
또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같습니다.
| order | 요소의 순서 설정 |
| align-self | align-items 속성보다 우선순위 요소마다 서로 다른 align 속성값 설정 가능 |
| flex | 요소의 너비 상대적 설정 가능 |
더 자세한 사항은 (www.tcpschool.com/css/css3_expand_flexbox) 참조
코딩을 공부하고 있는 학생입니다.
공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.
포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)
holicAZ - Overview
holicAZ has 9 repositories available. Follow their code on GitHub.
github.com