이 글은 flexbox로 만들 수 있는 10가지 레이아웃 을 읽고 이해한 부분을 요약, 정리한 글입니다. 모든 이미지, 내용 출처는 flexbox로 만들 수 있는 10가지 레이아웃와 MDN Web Docs를 참고하였습니다.
프론트엔드 개발자라면 display: flex; 속성은 정말 많이 사용하고 있을 것이다. 레이아웃을 쉽게 할 수 있는 방법이니까. 가로축 중앙 정렬을 위해서
display: flex;
justify-content: center;
align-items: center;아래와 같은 속성을 많이 사용하고 있을 것이다. 그럼 Flexbox가 정확히 어떻게 구성되는지 알아보자.
Flexbox의 구성
부모 요소가 flex-container, 자식 요소를 flex-item이라고 한다. 각각에 해당하는 속성은 다음과 같다.
- flex container 속성:
flex-direction, flex-wrap, justify-content, align-items, align-content - flex item 속성:
flex, flex-grow, flex-shrink, flex-basis, order
flex-grow, flex-shrink, flex-basis
아까 말했듯이, 부모는 flex-container, 자식은 flex-item으로 명명하겠다. 그럼 다음과 같은 코드를 잠시 보자.
.flex_container {
display: flex;
flex-direction: column;
height: 100%;
}
.flex_item {
flex: 1; /* flex: 1 1 0 */
overflow: auto;
}부모 코드는 대부분 알 거라고 생각한다. 그렇다면 아래 속성에서 flex: 1은 대체 뭘 의미하는걸까? 다음 그림을 보자.
사실 flex:1 속성은 뒤의 두 속성, flex-shrink와 flex-basis가 생략된 속성이다. flex 속성은 다음과 같이 3가지로 이루어지는데,
flex-grow
flex-grow 속성은 flex item의 확장에 관련된 속성이다.
0과 양의 정수를 속성값에 사용한다. 속성값이 0이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지된다. flex container의 크기가 커질 때 flex item의 크기도 커지게 하려면 1 이상의 값을 속성값으로 설정한다. 속성값이 1 이상이면 flex item의 원래 크기에 상관없이 flex container를 채우도록 flex item의 크기가 커진다.
- 실제 예제: codesandbox: flex-grow
flex-shrink
flex-shrink 속성은 flex item의 축소에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다. 기본값은 1이다.
속성값이 0이면 flex container의 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기로 유지된다. 속성값이 1 이상이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어든다.
flex-basis
flex-basis 속성은 flex item의 기본 크기를 결정하는 속성이다. 기본값은 auto다.
flex-basis 속성의 값을 auto로 설정하면 flex item은 상대적 flex item(relative flex item)이 되어 콘텐츠의 크기를 기준으로 크기가 결정된다.
flex 속성의 값으로 정수 하나만 선언하면 선언한 값은 flex-grow 속성의 값이 된다. 나머지는 기본값인 flex-shrink: 1 속성과 flex-basis: 0 속성이 적용된다. 다시 말해 flex 속성에 한 개의 정숫값만 있으면 이것은 flex-grow 속성의 값만 지정하는 단축 속성이다. 즉, flex: 2는 flex: 2 1 0을, flex: 3은 flex: 3 1 0을 나타내다.
flex 속성에 사용되는 키워드에 따른 설정값
내가 몰랐던 속성
flex: none
그렇다면, flex: none이 속성이 되었을 때, flex-item 박스는 어떻게 변할까?
다음과 같이 flex-item의 크기가 고정된다.
아래 이미지는 flex: 1을 했을 때의 결과다. 각 flex-item이 부모 요소인 flex-container을 꽉 채우는 것을 볼 수 있다.
margin-left: auto
margin-left: auto는 Flexbox에서 요소를 오른쪽 정렬시킬 때 많이 쓰인다. 다음의 그림을 보면 이해가 쉬울 것이다.
마찬가지로, 위의 그림과 같이 margin-right: auto는 왼쪽 정렬을 해준다. margin: 0 auto는 가운데 정렬을 해주지만, 이보다는 justify-content: center를 더 많이 사용하고, 직관적이니 굳이 언급하지 않겠다.
아래 이미지와 같이flex-item을 수직으로 배치할 때도 같은 방법을 적용할 수 있다.
margin-top: auto를 사용하면 브라우저 화면 아래에 딱 붙는 Footer 레이아웃을 잡을 때 사용하기 좋다!
flexbox를 사용하면 다음 그림과 같이 콘텐츠의 길이와 상관없이 항상 화면 아래에 표시되는 푸터를 만들 수 있다.
유동 너비 박스 만드는 방법
Flexbox를 자주 사용하던 FE 개발자라면 익숙한 개념일 것이다.
.flex_container {
display: flex;
}
.flex_item {
max-width: 300px;
}위와 같이 max-width: 300px만 설정해주면 박스의 크기는 300px 보다 크지 않는 선에서 유동적으로 변하게 된다.
display: inline-flex
난 지금까지 display: flex는 잘 사용해왔다. 그렇지만 inline-flex는 사용해본적이 없었다. 이 속성의 의미는 Flexbox를 이해하는데 큰 도움을 받았고, 지금 글을 작성하는데도 카피하다시피 참고하는.. flexbox로 만들 수 있는 10가지 레이아웃 글의 내용을 인용했다.
display: inline-flex속성은 flex container를 인라인 블록 요소로 만드는 속성이다.display: flex속성을 적용한 flex container는 블록 요소다. 블록 요소는 브라우저 화면이 한 줄 전체를 차지하지만, 인라인 블록 요소는 한 줄의 일부 영역만 차지한다.
대체 무슨 소리인가 싶다. 다음 그림을 보자.
.flex_container {
display: inline-flex;
max-width: 100%;
}flex-wrap
flex-wrap은 flex item이 flex container를 벗어났을 때 줄을 바꾸는 속성이다. white-space 속성과 동일하게 작동한다. 속성의 기본값인 nowrap은 flex item의 전체 크기가 flex container보다 커져도 줄을 바꾸지 않고 한 줄로 flex item을 배치한다.
justify-content: space-around
justify-content 속성은 주축을 기준으로 flex item을 수평으로 정렬한다. 다음과 같은 5개의 속성 값으로 다양한 수평 정렬 레이아웃을 만들 수 있다. 자주 사용하는 space-between과 비교해보자.
-
space-between: 첫 번째와 마지막flex item은 주축의 시작 부분과 끝부분에 정렬하고 나머지flex item을 일정한 간격으로 정렬한다. -
space-around: 주축을 기준으로flex item을 일정한 간격으로 정렬한다.
align-content
이 속성은 flex item이 여러 줄로 나열되어 있을 때 주축을 기준으로 수직 정렬 방법을 설정하는 속성이다. 일반적으로 자주 사용하는 align-items 속성(특히 center)은 주축을 기준으로 flex item을 수직으로 정렬한다.
둘의 차이점은
align-items속성은 한 줄로 나열되어 있을 때 사용된다는 것이다!align-content는 여러 줄일 때다!
주의점:
justify-content,align-items,align-content등은 모두 '주축'을 기준으로 정렬한다. 따라서flex-direction: column으로 주축 방향을 전환한다면, 정렬 기준도 전환된다는 점을 유의하자.
flex-auto
flex-auto 속성은 유동적으로 크기가 변하는 박스를 만들 때 유용하게 사용된다. flex: auto 속성은 flex: 1 1 auto 속성과 같다. flex container의 크기가 커지면 flex item의 크기도 커지고, flex container의 크기가 작아지면 flex item의 크기도 작아진다. flex container의 크기에 영향을 받는 반응형 flex item을 만들고 싶다면 flex: auto 속성을 사용한다.
만약 아래 이미지처럼 비율이 유지되는 flex-item을 적용하고 싶다면 flex-basis: 33.3%를 적용하도록 하자.
