[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고

오늘은 CSS의 display 속성에서 배치를 결정하는 Flex에 대해서 소개해보려 한다. 화면 레이아웃을 구성할 때 많이 사용한다. 그럼 Flex란 무엇이고 왜 필요할까?

예를 들어 웹사이트에 여러 콘텐츠를 배치한다고 하자. 인프런 사이트를 예시로 가져와보면 다음과 같다.

'왕초보도 할 수 있어요'를 header라 하는데, 개발자 도구 내에서 flex 속성을 바꿔보면 가운데로 오게 할 수 있다.

이렇듯 각각의 요소들의 배치를 보기 좋게 만드는데 적극적으로 사용될 수 있다. 극단적으로 비유해 보자면 문서 작업 시의 가운데 정렬, 왼쪽 정렬 등과 같은 느낌이다.

1. Flex 속성 적용을 위한 개념

먼저 flex 속성을 사용하기 위해서는 몇 가지 개념을 알아야 한다.

1) flex-container

flex 속성을 갖는 요소로 flex 부모 속성이라 한다.

2) flex-items

flex 속성을 갖는 요소의 자식 요소이다.

즉, flex를 사용하기 위해서는 반드시 부모와 자식 관계가 존재하는 코드여야 한다.

</div>

이렇게 html의 코드가 준비된 상태여야 flex를 사용할 수 있다.

파란색 선으로 표시된 구역을 container, 1번에서 5번까지의 사각형을 items라 할 수 있다.

css로 flex 속성을 container에 부여하면 item들이 배치되는 것이다.

.container {

width: 700px;

height: 300px;

background-color: rgb(218, 235, 241);

/* margin 좌우 방향 가운데 배치의 명령어, width가 설정되어 있어야 의미가 있다 */

margin: 0 auto;

display: flex;

}

이렇게 부모 class 에 display: flex;를 적어주어야 flex 속성의 적용이 가능하다.

3) 주축과 교차축

주축(main axis) : 아이템의 배치 방향으로 가로나 세로 중 하나이다.

교차 축(cross axis) : 주축에 대한 수직축이다.

2. Flex의 적용

(아래의 코드들은 위의 .container { } 안에 display: flex; 아래에 적어주면 된다.)

1) flex-direction: item을 쌓을 방향 정하기

/* row일 때 */

flex-direction: row;

flex-direction: row-reverse;

/* column 때 */

flex-direction: column;

flex-direction: column-reverse;

기본적인 주축의 방향을 결정하는 단계이다. flex-direction: row가 기본적으로 적용되어 있다. 여기서 row는 가로, column은 수직을 의미한다. 따라서 flex-direction: column;을 적용시키면 다음과 같이 바뀐다.

container의 크기가 items의 쌓은 크기보다 작기 때문에 위와 같이 튀어나온 것처럼 보이게 된다. 또한, 순서를 역순으로 쌓을 거라면 flex-direction: row-reverse; 나 flex-direction: column-reverse;를 사용하면 된다.

2) justify content: 시작점의 위치 결정 or 여백에 따른 위치 정렬

(1) 시작점의 위치에 따른 정렬

justify-content: flex-start;

justify-content: flex-end;

start 즉 시작점 방향으로 item들을 몰리게 하고 싶다면 flex-start, end 방향으로 item들을 몰리게 하고 싶다면 flex-end를 쓰면 된다. 왼쪽 오른쪽이 아닌 시작점에 따라 다르다. 그 말인 즉슨, 시작점을 변경하는 것이 가능하다는 것이다.

위의 flex-direction:row;에서 flex-start와 end는 시작점이 왼쪽이기에 다음과 같이 나타난다.

하지만 flex-direction:row-reverse;에 flex-start와 end를 적용해보면 다음과 같다. 시작점이 왼쪽으로 설정되기 때문이다.

(2) 가운데 정렬

justify-content: flex-center;

(3) 여백에 따른 위치 정렬

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

space-between은 양쪽 끝을 채운 후, items 사이에 균일한 여백을 준다.

space-around는 양 끝의 여백과 items 사이의 여백의 비율이 1:2로 구성된다.

space-evenly는 양 끝의 여백과 items 사이의 여백의 비율이 1:1로, 모든 여백이 같은 크기를 가진다.

여기까지 주축에 대한 정렬을 완료 했다.

이제 align을 통해 교차축에 대한 배치를 한다.

3) align-items: 교차 축에 대한 아이템 배치 및 stretch, baseline

align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

stretch 사용 시 height의 크기 설정을 해제해주어야 한다. 교차축 방향으로 items를 늘려 container를 채워준다.

flex-start: 교차축의 시작점인 위쪽 방향으로 items를 모아준다.

flex-end: 마찬가지로 교차축의 끝인 아래 방향으로 items를 모아준다.

center: 교차축(여기서는 세로)의 중앙으로 items를 배치해 준다.

baseline은 items내의 글자의 각 baseline을 맞추어 정렬한다.

4) flex-wrap: 줄 바꿈 처리

줄바꿈 하는 모습을 보여주기 위해서 items의 개수를 늘린다.

</div>

위의 코드는 html 내의 body 코드이다.

.container {

width: 700px;

height: 300px;

background-color: rgb(218, 235, 241);

margin: 0 auto;

display: flex;

}

.items {

width: 100px;

height: 100px;

font-size: 20px;

text-align: center;

line-height: 100px;

}

.item1{

background-color: rgb(176, 176, 217);

}

.item2{

background-color: rgb(207, 121, 207);

}

.item3{

background-color: pink;

}

.item4{

background-color: rgb(229, 132, 132);

}

.item5{