(인터랙티브 웹 페이지 만들기) Chapter4
Chap1. flex 방식으로 레이아웃 만들기
앞서배운 float을 활용한 레이아웃 배치에 이어서 더욱 더 편리하게 레이아웃을 만들 수 있는 flex방식이 있다 Flex(플랙스)는 Flexible Box, Flexbox라고 불리기도한다
flex의 기본
[Flex의 기본 레이아웃]
1
2
3
4
5
<div class="container">
<div class="item">flex item</div>
<div class="item">flex item</div>
<div class="item">flex item</div>
</div>
부모 요소의 div.container를 Flex Container라고 부르며 자식 요소인 div.item들을 Flex Item이라고 부른다
[속성]
- display : flex container를 정의한다
- flex-flow : flex-direction와 flex-wrap의 단축 속성
- flex-direction : flex items의 주 축을 설정한다
- flex-wrap : flex items의 여러 줄 묶음 설정
- justify-content : 주 축의 정렬 방법을 설정한다
- align-content : 교차 축의 정렬 방법을 설정한다
- align-items : 교차 축에서 items의 정렬 방법을 설정한다
display 속성 사용하기
자식 요소(Flex Item)를 감싸는 부모 요소(Flex Container)에
display: flex혹은display: inline-flex속성값을 사용하여 이 요소들이 Flexbox 레이아웃임을 선언한다
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.container {
display: flex;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
flex-direction 속성 사용하기
자식 요소를 어떤 방향성을 가지고 배치 할 지 결정하는 기본축을 선언한다. 이 기본축이 가로냐 세로냐에 따라 후속 속성들의 정렬축이 결정된다 기본값은 row, 측방은 가로다 따라서 모든 자식 요소가 가로로 배치된다 column의 측방은 세로이며 모든 자식 요소가 세로로 배치된다
1
2
3
4
5
6
7
8
9
10
11
<style>
.container {
display: flex;
flex-direction: row;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
...
</div>
justify-content 속성 사용하기
기본축 방향으로 자식 요소를 정렬한다. 혼동하기 쉬운 요인은 아래와 같으니 유의한다. 아래 예제에서 자식 요소들이 가로로 배치되어 있다고 해서 justify-content 속성이 반드시 수평 방향으로만 정렬하는 것은 아니다. flex-direction의 기본축(row, column)에 따라 수평, 수직으로 방향성이 바뀐다. 난해하다면 더 아래 align-items 설명에서 추가 예문을 참고한다. 만일 자식 요소가 부모 요소의 공간에 꽉 차게 배치되어 있다면 아무런 효과를 볼 수 없다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
...
</div>
align-items 속성 사용하기
기본축의 교차축(반대 축) 방향으로 자식 요소를 정렬한다. 혼동하기 쉬운 요인은 아래와 같으니 유의한다. align-items 속성이 반드시 수직 방향으로만 정렬하는 것은 아니다. flex-direction에서 선언한 기본축의 반대 방향으로 정렬한다. 만일 자식 요소가 부모 요소의 공간에 꽉 차게 배치되어 있다면 아무런 효과를 볼 수 없다. 아래 예문에서도 일부 속성값에서 그런 현상을 볼 수 있다. 여기에 소개한 flex-flow 속성은 flex-direction, flex-wrap 속성의 단축 속성이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.container {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
/* baseline 이해를 돕기 위한 가시성 선언 */
.container div:nth-child(1) { padding: 10px 40px 0 40px }
.container div:nth-child(2) { padding: 20px 40px }
.container div:nth-child(3) { padding: 10px 40px 80px 40px }
.container div:nth-child(4) { padding: 40px 40px 20px 40px }
.container div:nth-child(5) { padding: 20px 40px 10px 40px }
</style>
<div class="container">
<div>1</div>
<div>2</div>
...
</div>
align-content 속성 사용하기
flex-wrap: wrap 속성에 의해 줄넘김 된 요소를 개별 단위에서 하나의 그룹 단위로 묶는다. 자식 요소가 줄넘김 없이 한 줄로만 이루어진 경우에는 아무 효과가 없다. justify-content, align-items 속성값을 한꺼번에 가지고 있으며, 정렬 알고리즘은 align-items와 같이 기본축의 교차(반대) 방향이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.container {
display: flex;
flex-flow: row nowrap;
align-content: stretch;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
...
</div>
flex-wrap 속성 사용하기
자식 요소의 줄넘김을 처리한다. 기본값은 nowrap으로 줄넘김 하지 않는다. 값이 wrap인 경우, 기본적으로 자식 요소 크기의 합이 부모 요소보다 클 때 줄넘김 하는데, 100px 크기의 자식 요소가 10개 있다(총 1000px) 부모 요소의 크기는 700px이다. 부모 요소에 7개의 자식 요소가 한 행을 이루고 나머지 3개의 요소는 개행한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
...
</div>
자식 요소의 순서 지정하기
컨테이너 안에서 아이템이 나열되는 순서를 나타낸다. 숫자가 작을수록 앞에, 클수록 끝에 위치한다. 음수 사용이 가능하며, 음수가 클수록 앞에 위치한다.
order속성이 선언되면, HTML이나 CSS에서 구문을 어떤 순서에 따라 작성했는지와 상관없이, 오직order에 선언된 값에 의해서만 순서가 정해진다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.container {
display: flex;
flex-flow: row nowrap;
}
/* 화면 크기가 768px 이하면 끝으로 */
@media screen and (max-width: 768px) {
.container { flex-direction : column }
.last-with-mobile { order: 1 }
}
</style>
<div class="container">
<div class="last-with-mobile">1</div>
<div>2</div>
...
</div>