(CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법

 

 

css로 태그 크기를 이리저리 조정하다 보면 불편한 점을 금방 발견하게 된다.

 

컴퓨터를 기준으로 height와 weight를 설정해서 디자인하면, 모바일에서 볼 때 디자인이 이상해지는 경우가 있다. 

 

따라서 모든 해상도에서 웹이 잘 보여주기 위해서는 반응형으로 디자인을 하는 게 좋다.

 

이때 사용하면 좋은 것이 display: flex; 이다.

 

 

 

flex 사용 방법

자식 앨리먼트에 flex를 적용하고 싶으면 부모 앨리먼트를 flex container로 만들어야 한다.

 

즉 아래 html에서 span 태그에 flex를 적용하고 싶으면 자식인 fruit-basket__apple이 아닌

 

부모인 fruit-basket에 flex를 적용해야 한다는 것이다.

<div class="fruit-basket">
	<span class = "fruit-basket__apple">apple</span>
    <span class = "fruit-basket__banana">banana</span>
</div>

.fruit-basket{
	display: flex;
}

 

 

주축과 교차축

이어서 설명할 justify-content와 align-content 속성을 설명하기 위해서는 먼저 주축과 교차축에 대해 설명해야 한다.

 

기본적으로 주축(main axis)은 가로축이며, 교차축(cross axis)은 세로축이다. 

 

하지만 이것이 절대적인 것은 아니다. 

 

후에 설명하겠지만 flex-direction을 사용하면 주축이 세로축으로 교차축이 가로축으로 바뀔 수 있다.

 

 

 

 

 

justify-content 사용법

justify-content 속성은 Flex 컨테이너의 기본(main axis) 축 상에서 flex요소를 정렬하는 방법을 정의한다. 

 

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다. (많이 사용)
• space-around: 요소들 주위에 동일한 간격을 둡니다.

 

 

align-items 사용법

align-content 속성은 Flex 컨테이너의 교차(cross axis) 축 상에서 flex요소를 정렬하는 방법을 정의한다. 

 

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

 

flex-direction 사용법

flex-direction 속성은 Flex 컨테이너의 정렬할 방향을 정의한다.

 

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

 

 

flex-wrap 사용법

flex-wrap 속성은 flex 컨테이너 항목을 한 줄로 강제할지 아니면 여러 줄로 줄 바꿈 할 수 있는지를 정의한다.

 

• nowrap : 요소들을 한 줄로 강제 정렬한다.
• wrap : 요소들이 여러 줄로 줄 바꿈 되게 한다.
• wrap-reverse : wrap과 동일하게 동작하지만 줄이 거꾸로 출력된다.

 

 

 

설명만으로 이해가 어렵다면 아래 게임을 플레이하면서 위 속성들에 익숙해질 수 있다.

Flexbox Froggy