CSS Flex Box (플렉스 박스)

본 게시물은 유튜버 "드림코딩엘리" 님의 플렉스 박스편을 보고 제 티스토리에 복습차원에서 정리하는 것입니다.

http://academy.dream-coding.com/

Dream Coding

 

Flex Box란?

박스를 행과 열로 배치시킬 때 쓰는것

 

원하는 프론트단의 view를 위하여

기존에는 position float table로 컨텐츠를 배치하여 왔습니다.

 

 

float의 원래 목적은 텍스트들이 이미지를 감싸게 해주는 목적으로 쓰임.

 

하지만 Flex Box라는 개념이 나옴으로 우린 이제 container와 item의 개념만 알면 됩니다.

container  = item들을 모아놓은 것.

 

item = 각각의 컨텐츠

 

container에게 지정할 수 있는 속성값.

 

각각의 item들에게 지정할 수 있는 속성값

 

Flex Box의 컨텐츠 방향에 따라 main axis가 결정된다.

 

item들이 세로로 배치된다면 세로 방향이 main axis

 

해당 html과 css를 작성합니다. 

 

.container 부분의 100vh vs 100% 에 대해 설명드리겠습니다.

 

100vh는 말그대로 부모태그에 상관없이 100% 다쓰는것 입니다.

 

100%는 item에 맞게 컨테이너가 들어있는 부모태그의 높이의 100%를 맞추겠다는 의미입니다.

 

100% 설정하자 beige색이 사라졌습니다.

 

<div> 는 block-level이기 때문에 한줄을 모두 차지합니다. 그 상태에서 width와 height속성을 주었습니다.

display: flex; 속성값은 쉽게 말해 " 너 이제 플렉스 박스 " 라고 지정해주는 것입니다.

이와 동시에 왼쪽에서 오른쪽으로 정렬됩니다. ( block-level 해제)

이러한 flex box를 지정하였으니 이에 대한 속성값을 줄 수 있습니다.

 

flex-direction: row; 가 기본값입니다. 

(왼쪽 사이드에 붙어서 오른쪽으로 정렬)

flex-direction: row-reverse; 는 오른쪽 사이드에 붙어 오른쪽으로부터 왼쪽으로 정렬하게 됩니다.

 

(row 와 데칼코마니 느낌)

 flex-direction: column; 은 위쪽에 붙어서 아래쪽으로 정렬을 합니다.

flex-direction: column-reverse; 는 짤렸지만 이 또한 데칼코마니 느낌으로 

 

아래 사이드에 붙어서 위쪽방향으로 정렬되었습니다.

flex-wrap 기능이 있습니다. 

 

flex-wrap 이란 wrap의 의미 그대로 포장을 한다는 의미입니다. 포장을 했으니 그 형태가 보존이 되어야 겠죠

 

flex-wrap: nowrap; 이 기본값 입니다.

flex-wrap: wrap; 을 적용하면 내용이 보존되기 떄문에 스크롤로 화면을 줄일때 해당 item이 아래에 나오게 됩니다.

 

 

flex-wrap: wrap-reverse; 의 경우 맨아래 화면에 붙어 위쪽방향으로 배치를 하게 됩니다.

저의 CSS 이전 컨텐츠에서 border의 속성값을 따로따로 설정해주면 불편하니 한번에 지정할 수 있다고 말씀 드린적 있습니다. 

 

border: 1px solid black; 처럼

 

flex-flow:를 이용하여 flex-direction 과 flex-wrap 옵션을 지정할수 있습니다.

 

ex) flex-flow:column nowrap;

item을 어떻게 배치할 것인지에 관해서는

 

justify-content를 사용합니다.

 

justify-content: flex-start; 는  왼쪽을 기준으로 순서대로 배치합니다.

justify-content: flex-end;는 순서는 유지하되 오른쪽단으로 붙여 버리는 것입니다.

flex-direction과 비교하면서 보셔야 합니다.

justify-content: center;는 가운데 정렬

justify-content: space-around; 속성값은 서로 각각의 영역을 차지한 상태로 나열이 되는 것입니다.

justify-content: space-evenly; 는 위쪽 space-around;와 비교하면 이해가 쉽습니다.

space-around; 는 각각의 고유한 영역을 갖고있기 때문에 양사이드와 양사이드에 붙어있는 1번 과 10번 박스는 

박스들의 사이 공백보다 적게 양사이드에 붙어 있습니다

space-evenly는 이러한 사이드 공백문제 조차도 균등하게 배열시킵니다.

space-between 속성값은 양 사이드의 1번 10번 박스들을 사이드에 붙이고 균등하게 배열합니다.

justify-content는 item의 배열에따른 main axis 였다면

 

align-tiems는 cross axis입니다. 

 

따라서 align-items: center; 를 하게 된다면 세로축을 기준으로 배열을 하게됩니다.

1번째 item에 padding: 20px; 속성값을 주었습니다. 우린 이에 맞춰 croos axis를 정렬하고자 합니다.

 

align-items: baseline; 속성값을 주면 한쪽 item이 너무 큰경우 그 item에 맞게 cross axis로 정렬을 해줍니다.

박스들을 조금 더 생성하였습니다.  + wrap 설정

 

align-content: space-between; 양 사이드에 붙이고 균일하게 배열 (justify-content와 같음)

align-content: center; 속성값은 cross axis의 가운데정렬값

박스를 3개로 줄여서 item의 속성값에 대해 살펴보겠습니다.

이렇게 order를 지정할 수 있습니다.

flex-grow: (기본값 0 )

flex-grow: 1; 값을 지정하게 되면 item들이 container를 꽉채우려고 합니다. 

(늘어날때만 해당)

 

 

 

 

37

flex-grow: 1; 씩 다 지정해주면 container를 기준으로 1: 1: 1비율이 됨.

flex-shrink: (기본값 0 ) 를 설정해주면 container가 줄어들었을 때 해당 수치의 비율만큼 더 줄어든다.

flex-basis는 화면의 비율만큼 차지한다는 것을 뜻.

 

위의 코드를 보면

item1, item2, item3 가 60% 30% 10% 씩 차지 하게 됩니다.

각각의 css로 가서 align-self: center; 를 지정해주면 해당 item만 가운데정렬을 합니다.

 

이외에도 FLEX BOX의 정보가 궁금하시면

studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

해당 사이트를 더 참고하시면 좋을 것 같습니다.

 

* 참고

참고로 FLEX는 지원이 안되는 브라우저도 있으니

developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

기본이 되는 mdn 사이트에서 항상 공식문서를 보시고 참고하시길 바랍니다.