콘텐츠 배치를 통해 화면을 나누는 방법이 페이지 레이아웃인데 화면을 수직으로 구분할 것인지 수평으로 구분할 것인지 잘 결정해야 한다. 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: column;으로 설정한 뒤의 실행 결과이다.
#container1 {
display: flex;
border: 1px solid black;
padding: 8px;
flex-direction: column;
}
.class1 {
border: 1px solid red;
padding: 6px;
}
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 |
'개발공부 > Front-end' 카테고리의 다른 글
[HTML, CSS] CSS 텍스트 꾸미기, 박스 모델 (0) | 2022.04.28 |
---|---|
[HTML, CSS] CSS 기본 개념, 셀렉터 (0) | 2022.04.27 |
[HTML, CSS] HTML 기본 (0) | 2022.04.27 |