플렉스 아이템을 여러 줄로 배치하기
속성명 |
속성값 |
적용 요소 |
flex-wrap |
nowrap(기본값), wrap, wrap-reverse |
플렉서블 박스 |
속성값명 |
속성값 설명 |
nowrap |
박스를 한 줄로 배치하며, 기본값입니다. |
wrap |
박스를 여러 줄로 배치합니다. |
wrap-reverse | 박스를 여러 줄로 배치하되 역방향으로 배치합니다. 즉, 주축이 가로일 때는 아래에서 위로, 주축이 세로일 때는 오른쪽에서 왼쪽으로 배치합니다. |
플렉스 아이템의 배치 방향과 여러 줄 배치를 한 번에 설정하기
속성명 |
속성값 |
적용 요소 |
flex-flow |
[flex-direction]한칸 공백 [flex-wrap], row nowrap(기본값) |
플렉서블 박스 |
속성값명 |
속성값 설명 |
[flex-direction]한칸공백 [flex-wrap] |
첫 번째 속성값은 박스의 배치 방향을 설정하는 속성의 값을 작성하고, 두 번째 속성값은 박스를 여러 줄로 배치하는 속성의 값을 작성합니다. 첫 번째 속성값과 두 번째 속성값의 사이는 반드시 한 칸을 띄어야 합니다. |
주축 방향으로 다양하게 플렉스 아이템 배치하기
속성명 |
속성값 |
적용 요소 |
justify-content |
flex-start(기본값) flex-end, center, space-between, space-around |
플렉서블 박스 |
속성값명 |
속성값 설명 |
|||||||
flex-start
|
박스를 주측의 시작점으로 배치하며, 기본값입니다. |
|||||||
flex-end
|
박스를 주측의 끝점으로 배치합니다. |
|||||||
center
|
박스를 중앙으로 배치합니다. |
|||||||
space-between
|
플렉서블 박스에 빈 공간이 있을 때 사용합니다. 양쪽 끝에 있는 박스를 끝으로 붙이고, 나머지 박스는 간격이 동일하게 자동 정렬 |
|||||||
space-around
|
플렉서블 박스에 빈 공간이 있을 때 사용합니다. 단 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬됩니다. |
소스코드
'Program > HTML5 & CSS3' 카테고리의 다른 글
| [모바일 웹]이미지, 폰트 크기를 디바이스에 맞추기 (0) | 2016.03.18 |
|---|---|
| [반응형 웹 디자인]플렉서블 박스 기술 익히기-3 (0) | 2016.03.10 |
| [반응형 웹 디자인]플렉서블 박스 기술 익히기 (0) | 2016.03.09 |
| [반응형 웹 디자인]플렉서블 박스 기본 개념 이해하기. (0) | 2016.03.09 |
| [반응형 웹 디자인]뷰포트 이해하기. (0) | 2016.03.09 |
