제대로 HTML을 배우지 않고 웹 뼈대를 작성할시 UI구성에서 많은 어려움을 느낄 수 있습니다. (나처럼..)
가운데 정렬을 해도 어떤 박스는 제대로 되는 반면 어떤 박스는 그자리 그대로 있거나 길게 늘어집니다.
이번에는 박스 구조를 마음대로 구성할 수 있게 flexbox에 대해 배워볼것 입니다.
기본 display
flexbox를 배워보기 이전에 우선 기본적인 display인 block, inline, inline-block 박스에 대해 간단히 알아보겠습니다.
-
block :
<div>같은 block 태그를 통해 만들어지는 박스로 한 라인에 하나만 위치할 수 있습니다. -
inline :
<span>같은 inline 태그를 통해 만들어지는 박스로 한 라인에 여러개가 위치할 수 있습니다. 특징으로는 높이와 너비(height, width)를 가질 수 없습니다. -
inline-block : block과 inline의 특징을 섞은 박스로 높이와 너비를 가질 수 있고 한 라인에 여러개가 위치할 수 있습니다.
과거에는 inline-block을 많이 사용했지만 유연하지 못하고 편의 기능이 부족하였고 이를 보완하기위해 개발된 것이 flexbox입니다.
flexbox
앞서 말했듯 flexbox는 정렬, 좌우 대칭, reverse, 행열 변경등 여러 기능을 지원합니다.
이를 사용하기 전에 flexbox의 세가지 주의사항부터 살펴보겠습니다.
- 자식 엘리먼트에 적용하기 위해선 무조건 부모 클래스에
display : flex를 선언한다. (속성들도 부모클래스에서 적용한다.) - justify-content는 수평에서 적용되는 것이 아니라 주축에서 적용된다.
- align-items는 수직에서 적용되는 것이 아니라 교차축에서 적용된다.
주의사항 1을 자세히 살펴보면
<body> <div></div> <div></div> <div></div> </body>앞서
display : inline, block, inline-block등은 적용을 원하는 해당 박스에 직접 선언하여 사용하였습니다. (<div display : inline>)하지만 flex의 경우 자식 엘리먼트인
<div>박스에 적용을 원할 경우 부모 엘리먼트에 선언하여 사용합니다. (<body display : flex>)
주의사항 2,3을 살펴보면
flex에는 주축과 교차축이라는 개념이 존재합니다.
기본적으로 주축은 row 즉, 수평으로 적용되어 있기 때문에
justify-content가 수평에서 정렬되고align-items가 수직에서 정렬되는것 입니다.
하지만
flex-direction : column으로 주축을 수직으로 변경시키면
주축은 수직이되고 교차축은 수평이 됩니다.
flex의 주요 속성들
각 속성에 대한 자세한 정보는 mdn을 참고하여 사용합시다.
-
justify-content : 주축의 정렬 방법을 설정
-
align-items : 교차축의 정렬 방법을 설정
-
flex-wrap : flex 박스들의 각 요소를 wrapping함 (기본값 : nowrap)
-
flex-direction : flex 박스들의 주축을 설정 (기본값 : row), row-reverse, column-reverse등으로 요소의 순서도 바꿀 수 있음)
