[CSS] flex 정리

css작성 시 자주 사용하고 있는 flex!

flex를 처음 접했을 때는 어리버리 했는데 지금은 여기저기 유용하게 잘 사용 중이다.

그런 의미에서 복습 겸 정리를 해보자!

 

일단 flex는 mdn에서 정의하기를 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이라고 한다.

 

하지만 글로는 잘 이해가지 않는 법! 실제로 예제를 통해 적용해보자.

일단 flex를 사용할 html 구조를 만들어준다.

 

flex 관련 html 구조 예제

<div class="flex-container">
	<div class="flex-item">1</div>
	<div class="flex-item">2</div>
	<div class="flex-item">3</div>
	<div class="flex-item">4</div>
	<span class="flex-item">5</span>
</div>

• flex-container : 컨테이너
• flex-item : 아이템

html을 살펴보면 아이템 5개를 컨테이너가 감싸고 있는 형식이며, 아직 스타일도 적용하지 않아 아래 이미지처럼 나열되어 보인다. 

기본 정렬 적용

여기서 display: flex를 컨테이너에 우선 적용해봤다.  

.flex-container {
  display: flex;
  background: purple;
}

.flex-item {
  padding: 10px;
  background: skyblue;
  border: 2px solid orange;
}

기본 플랙스 적용

위의 css를 적용하면 아래로 나열되어있던 아이템들이 한줄로 나란히 진열되었다.

block 요소와 inline 요소 상관 없이 한 줄로 잘 나오고 있지만 여기서 문제가 있으니!

작은 화면에서는 아이템들이 한줄로 나열되어 하늘색만 보일지라도 화면을 넓히면 보라색 즉 컨테이너의 영역이 나온다는 것이다.

기본 플랙스 적용 후 화면 늘리기

이런 세세한 부분들을 잡기 위해서 필요한게 바로 flex css 속성들이다.

flex css 속성은 아이템(.flex-item)을 위한 속성과 컨테이너(.flex-container)을 위한 속성으로 나누어진다.

먼저 아이템을 위한 속성을 살펴보자.

 

아이템(.flex-item)에 적용되는 flex css 속성

• flex-grow : 컨테이너가 아이템들보다 크기가 클 때 아이템들이 가지게 되는 크기 값  (0일시 늘어나지 않음)
• flex-shrink : 아이템들의 크기가 컨테이너보다  클 때 아이템들이 가지게 되는 크기 값 (0일시 줄어들지 않음)
• flex-basis : 아이템의 기본 초기값 (width와 의미는 같지만 flex-basis가 우선순위로 적용 )

이게 무슨 소리인지는 하나씩 자세히 살펴보자.

 

flex-grow

기본 플랙스 적용 후 화면 늘리기

지금 상황은 아이템들(.flex-item)의 width를 다 합친 것 보다 컨테이너(.flex-container)의 width가 더 크기에 보라색 배경이 노출되는 상황이다. 여기서 우리는 보라색이 보이지 않고 모두 같은 비율로 컨테이너를 꽉 채웠으면 한다.

이럴 때 사용하는 것이 flex-grow다.

.flex-item {
	flex-grow: 1;
}

위처럼 모든 아이템에 flex-grow를 추가하고 다시 확인해보자.

flex-grow 적용 후 화면 늘렸을 때

 

flex-grow 적용 후  화면을 줄였을 때

 

그럼 이런 식으로 보라색은 보이지 않고 같은 비율로 늘어난 아이템들이 나타난다!

혹시나 하고 화면을 줄여봐도 문제 없이 잘 노출된다. 

여기서 만약 모든 아이템을 같은 비율로 맞추는 게 아니라 특정 아이템만 늘리고 싶다면 flex-grow를 각각 주면 된다.

.flex-item:nth-child(2) {
	flex-grow: 1;
}
.flex-item:nth-child(3) {
	flex-grow: 0.5;
}

특정 아이템만 늘리기

 

그러면 이런 식으로 2번째 아이템과 3번째 아이템만 늘어난 모양으로 바뀐다.

여기서 grow 뒤에 들어가는 숫자는 컨테이너의 크기에서 아이템들의 크기를 빼고 남은 여백 사이즈를 나눠서 비율별로 적용한 것이다. 

 

flex-shrink 

그럼 flex-shrink는?

이건 flex-grow의 반대로 생각하면 된다. 

아까는 컨테이너의 여백이 남아서 문제였다면 이번엔 여백이 없어서 문제인 것!

만약 아이템 안에 들어가는 글자가 4글자라고 해보자.

그럼 화면이 줄어들수록 아이템의 크기도 줄어든다.

화면 줄였을 때

flex 속성이기에 무조건 한 줄로는 보여야하는데 컨테이너의 크기가 작아졌으니 아이템들도 그에 맞춰 크기를 줄인 것이다.

이럴때 만약 특정 아이템만 줄이는 비율을 다르게 하고 싶다면 flex-shrink를 각각 주면 된다.

.flex-item:nth-child(2) {
	flex-shrink: 0.5;
}
.flex-item:nth-child(3) {
	flex-shrink: 0.2;
}

특정 아이템에만 shrink 적용하기

그럼 2번째 아이템과 3번째 아이템이 다른 아이템과 다른 비율의 크기로 적용된 것이 뚜렷하게 보인다.

여기서  flex-grow와 flex-shrink의 차이를 말하자면 grow는 숫자가 클 수록 크기도 커지고 shrink는 숫자가 작을 수록 크기가 커진다는 것! 

 

flex-basis

flex-basis는 말 그대로 기본 값을 의미한다. css의 width와 동일하지만 flex-item에서는 width보다 flex-basis를 더 우선으로 인정해준다.  아이템에 flex-basis를 10px로 주면 해당 아이템은 10px을 제일 기본 사이즈로 가지게 된다.

 

이렇게 아이템에 적용되는 flex css 속성을 알아봤는데 그럼 이걸 각각 주고 싶을 때 다 따로 하나씩 적는 건 귀찮은데... 싶겠지만 아니다! 이걸 또 요약해서 사용할 수 있다.

 

flex (요약본)

flex: 1 1 100px; /* flex-grow flex-shrink flex-basis */

flex: 2; /* flex-grow */
flex: 10em; /* flex-basis */
flex: 1 30px; /* flex-grow | flex-basis */
flex: 2 2; /* flex-grow | flex-shrink */

순서대로 grow shrink basis 값을 적으면 쉽게 해결된다.  

예를 들어 아이템의 기본값이 50px이고 화면을 늘렸을때는 꽉 차게 늘리고 싶지만 화면을 줄였을 때는 안 줄어들게 하고싶다면

flex: 1 0 50px; 이런 식으로 작성하면 된다.

flex에 값이 한 개일때는 숫자를 적으면 flex-grow이며 px,rem,%등으로 지정하면 flex-basis이다.

값이 두 개일 때는 첫번째 값은 숫자를 적어 flex-grow로 표시하고 두번째 값이 숫자면 flex-shrink이고 px, rem,% 등으로 지정되면 flex-basis로 나타난다. 

 

그럼 이제 컨테이너에 적용되는 flex css를 살펴보자.

 

컨테이터(.flex-container)에 적용되는 flex css 속성

• flex-wrap : 아이템을 한줄에 배치할지 아니면 여러줄로 나누어 배치할 지 결정
• justify-content: 컨테이너가 아이템들보다 크기가 클 때 아이템들이 가지게 되는 크기 값  (0일시 늘어나지 않음)
• align-items: 아이템들의 크기가 컨테이너보다  클 때 아이템들이 가지게 되는 크기 값 (0일시 줄어들지 않음)
• flex-direction : 아이템의 기본 초기값 (width와 의미는 같지만 flex-basis가 우선순위로 적용 )

flex- wrap 

아이템을 배치할 때  한줄로 배치할지 아니면 여러줄로 나누어 배치할지 결정한다.

• nowrap : 한 줄로만 배치
• wrap : 여러줄로 나누어서 배치
• wrap-reverse : 여러줄로 나누어서 배치하지만 순서를 역순으로 변경 

아까 위에서 적용한 것 처럼 나는 화면을 늘렸을때는 아이템 크기가 자동적으로 늘어나지만 줄어들었을 때는 두줄로 보이게 하고 싶어요 하는 경우 이런 걸 이용할 수 있다. 

화면을 늘렸을 때

화면을 줄여들었을 때

 

flex-direction

아이템을 배치할 때 사용할 주축 및 방향 (정방향, 역방향)을 지정한다.

 row는 가로 column은 세로 이며 reverse가 붙는 건 역순을 말한다.

flex-direction

여기서 저 flex-direction으로 정하는 라인을 주축(메인축)이라 부른다.

또한 그 주축(메인축)과 교차되는 축을 교차축이라 부른다.

주축과 교차축

 

justify-content

컨테이너의 주축( 메인축 ) 관련 정렬이다.

align-items

컨테이너의 교차축 관련 정렬이다.

 

justify-content 와 align-items의 정렬 속성으로는 아래와 같다.

• flex-start: 배치의 시작 순서로 정렬
• flex -end: 배치의 끝 순서로 정렬
• center :가운데 정렬
• space-between: 아이템들을  균등한 간격으로정렬
• space-around : 아이템들을 균등한 간격으로 정렬하고 컨테이너의 가장자리에도 반 간격 생성
• space-evenly : 아이템들을 균등한 간격으로 정렬하고 컨테이너의 가장자리에도 간격 생성

이렇게만 보면 헷갈릴 수 있는데 space-around와 space-evenly가 특히 헷갈릴 수 있어서 이미지로 정리했다.

전체 설명 요약

space-between, space-around, space-evenly의 간격이 각각 다른 것이 나타난다.

이 셋의 간격을 조금 더 자세히 살펴보면 아래와 같다.

flex 간격 관련

space-between은 가장자리 여백이 없이 모두가 일정하게 나타난다.

space-around는 아이템의 좌우에 각각 균등한여백이 주어져있다. 그래서 아이템과 아이템 사이에는 같은 여백이 2번 들어가져있고 가장자리에만 1번의 여백이 적용되어 있다. 

space-evenly는 아이템의 좌우에 모두 동일한 여백이 주어져 있다.

 

flex-flow (요약본)

flex-flow: row wrap; /* flex-direction flex-wrap*/

direction과 wrap을 요약해서도 사용할 수 있다.