[HTML, CSS] CSS 페이지 레이아웃 - Flexbox

콘텐츠 배치를 통해 화면을 나누는 방법이 페이지 레이아웃인데 화면을 수직으로 구분할 것인지 수평으로 구분할 것인지 잘 결정해야 한다. Flexbox를 사용해서 레이아웃을 잡으면 박스를 유연하게 늘리거나 줄여가면서 잡을 수 있다.

 

1. flexbox 사용하기

 

부모 박스 요소에 display: flex; 를 적용하면 자식 박스의 방향이나 크기 등을 결정할 수 있는 구성 방법이다.

flexbox는 row가 기본 방향값으로 지정되어있는데 flex-direction: column; 으로 바꾸면 수평으로 분할된다.

#HTML 코드 예시

<div id="container1">
	<div class="class1">box1</div>
	<div class="class1">box2</div>
	<div class="class1">box3</div>
</div>

#container1 {
  display: flex;
  border: 1px solid black;
  
.class1 {
  border: 1px solid red;
  margin: 10px;
}

 아래의 화면은 위의 코드를 실행한 화면이다. 

flex-direction이 기본값인 row로 실행한 결과 화면

이번에는 부모 요소에 flex-direction: column;으로 설정한 뒤의 실행 결과이다.

#container1 {
  display: flex;
  border: 1px solid black;
  padding: 8px;
  flex-direction: column;
}

.class1 {
  border: 1px solid red;
  padding: 6px;
}

flex-direction: column으로 변경한 실행 결과 화면

 

2. flex 속성 지정 - 자식 박스 요소

 

부모 요소 박스의 display 속성에서 flex를 적용했다면, 자식 요소 박스에서는 flex 속성에 적용될 영역값을 정한다. flex 속성에 적용되는 영역은 3가지인데 flex: grow, shrink, basis 순서이다. 자식 요소에 flex 속성을 추가하지 않으면 기본 default값인 flex: 0 1 auto 가 적용된다. grow, shrink 속성은 단위는 없고 비율에 따라 결과가 달라진다. 

 

grow: 모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율을 가진다.

 

3. 콘텐츠 정렬 방법

 

flexbox를 잘 이해하려면 axis(축)에 대해서 충분히 이해하고 있어야 한다. main axis와 cross axis로 나뉘며, main axis는 flex-direction에 의해 결정된다.

 

수평 정렬 (justify-content): flex 내부 항목의 행을 정렬한다. main axis를 기준으로 정렬한다.

적용값의 종류에는 stretch, flex-start, flex-end, center, space-around, space-between, space-evenly 등이 있다.

 

수직 정렬 (align-items): flex 내부 항목의 열을 정렬한다. cross axis를 기준으로 정렬한다.

적용값의 종류에는 flex-start, flex-end, center, stretch, baseline 등이 있다.

 

 

flex와 관련된 속성 정리

flexbox 속성	flex 요소 속성	flex-direction 속성
display, flex-direction, justify-content, align-items, flex-wrap, flex-flow, align-content	order align-self flex	row, row-reverse, column, column-reverse