Flex

목적

부트캠프 과정의 두번째 과제로 HTML과 CSS 만으로 Youtube의 홈부분을 flex로 구조를 잡는 과제였다. Flex는 항상 써왔다. 그래도 Flex의 각 속성에 대해 좀더 깊이이해하고 쓰자는 생각으로 이글을 작성한다.

 

Flex란?

주로 CSS Flexbox 레이아웃을 만들때 사용되는 속성으로, 웹페이지의 레이아웃을 효율적으로 설계하고, 요소들을 유연하게 배치하기 위한 CSS 기술이다.

 

Flex의 속성들
Flex의 Container는 부모요소를 뜻하고, Item은 자식요소를 뜻한다.

Container 속성
속성명	설명	단위 속성
dispaly	부모요소를 Flexbox 컨테이너로 만든다.	flex, inline-flex
justify-content	주축의 요소들을 정렬한다.	flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	교차축의 단일요소들을 정렬한다.	stretch(기본값), flex-start, flex-end, center
align-content	교차축의 다중 요소들을 정렬한다.	flex-start, flex-end, center, space-around, space-between, space-evenly
gap	요소들간의 가로,세로 간격을 조정한다.	순서: x축 y축 / px,em,rem,%
flex-direction	주축의 방향을 변경한다.	row(기본값), column, row-reverse, column-reverse
flex-wrap	넘치는 자식요소를 줄바꿈한다.	nowrap(기본값),wrap,wrap-reverse
flex-flow	direction,wrap의 단축속성	순서: direction wrap

 

Item 속성
속성명	설명	단위 속성
flex-grow	item의 크기를 기준으로 남는 공간을 아이템들에 분배하는 비율	0(기본값),1~
flex-shrink	item의 크기가 Container 영역을 넘을경우 모자라는 공간만큼 item을 줄이는 비율, wrap 속성이 적용되면 해당속성은 무시된다.	1(기본값),1~
flex-basis	아이템의 최소 크기를 지정한다. grow / shrink 속성값이 미지정인 경우, 기본크기로 고정	0(기본값), px,em,rem,%
align-self	개별 아이템의 교차축을 다시 정의한다.	flex-start,flex-end,center
flex	grow,shrink,basis의 단축속성	순서: grow shrink basis

 

해당표는 주로쓰이는 속성과 내가자주쓰는 속성으로 표를 만들었다.

 

주축과 교차축

 

내가 Flex를 처음공부 할때엿을까? 제일 헷갈렸던 부분은 주축, 교차축이였다.  해당내용을 제대로 알고있어야 flex의 속성들을 제대로 활용할수가 있다.

빨강: 주축 / 파랑: 교차축

flex는 수평과 수직으로 축을 이룬다. 위그림에서 주축은 수평, 교차축은 수직이다. flex-direction에 의해 주축이 결정되는데, 기본값은 row이므로 flex-direction을 설정하지 않으면 주축은 수평을 가르키고, 교차축은 수직을 가르키게 된다. 만약 여기서 flex-direction이 column으로 설정한다면 주축은 수직, 교차착은 수평으로 변경이 된다. 해당개념을 잘알고 있어야 flex속성을 좀더 유연하게 사용할 수 있다.

 

display: flex

해당속성은 부모에 적용하는 속성이다. display:flex를 적용하면 기본적으로 적용되는 속성들이 있다.

 

- flex-direction: row

- justify-content: flex-start

- align-items: stretch

- align-content: stretch

- flex-wrap: nowrap

 

위에 해당값은 단지 display:flex만 적용하여도 적용되는 속성들이기때문에 주위해야 한다.

 

display: inline-flex

해당속성은 부모에 적용하는 속성이다.  부모요소인 Container가 inline-block형태로 적용된다.

 

inline-flex

자식에게 영향이 가는속성이 아니다. 위 그림처럼 부모 Container를 수평으로 정렬하고 싶다면 inline-flex를 사용하여 배치를 시킬수가 있다.

justify-content

해당속성은 부모에 적용하는 속성이다. 주축의 요소들을 정렬한다. 위에서 말을했지만 주축은 flex-direction에 따라 달라진다.

 

 

justify-content

해당 내용은 direction이 row일경우다.  그렇기에 수평에 대한 정렬을 justify-content로 조정을하지만 만약 column이라면? 수직에 대한 속성을 justify-content로 맞춰줘야 한다. 해당상황 그림을 수직으로 돌려서 생각하면 간단하게 생각할수가 있다. 또한 주의할점은 around는 각요소들이 간격을가지고 evenly는 모든 여백을 동등하게 나눈다. 

 

align-items

해당속성은 부모에 적용하는 속성이다. 교차축의 단일 요소들을 정렬한다. 주축에 따라 교차축도 달라진다.

align-items

해당 내용도 direction이 row일경우이며 주축이 수평이기 때문에 align-items로 교차축인 수직을 정렬해야 한다. 이와 마찬가지 주축이 column속성으로 수직으로 바뀐다면, 교차축은 수평으로 바뀌게 된다. 주의할점은 교차축의 아이템이 하나로 이루어져 있어야한다.  여러개일경우에는 다음속성인 align-content로 사용해야 한다.

 

align-content

해당속성은 부모에 적용하는 속성이다. 교차축의 다중 요소들을 정렬한다. 주축에 따라 교차축도 달라진다.

align-content

align-items와 차이점이 있다면 여러개 일때 사용해야 한다는 점이다. 그렇기에 space속성들을 사용할수 있다.

 

gap

해당속성은 부모에 적용하는 속성이다. 요소들의 가로,세로 간격을 조정한다.

gap

gap: 10px로 지정할경우에는 가로 x 세로 동시에 적용되고, 만약 가로 세로를 따로 주고싶다면 gap: x축 y축 으로 지정하여 따로 정할수 있다.

 

flex-direction

해당속성은 부모에 적용하는 속성이다. 주축의 방향을 변경한다.

왼쪽 row / 오른쪽 column

 

 

위에서 계속 얘기한 주축, 교차축에 대한 속성이다. 아이템의 주정렬을 수직,수평 방향으로 할지를 정하는 속성이다.

 

flex-wrap

해당속성은 부모에 적용하는 속성이다. 넘치는 자식요소를 줄바꿈한다.

flew-wrap

해당속성을 통해서 item들을 화면크기나 뷰포트에 맞춰 여러줄에 표시할 수 있다. 주로 반응형 디자인,  동적크기변화에 사용되며 좀더 유연하게 화면에 배치할 수 있다.

 

 

flex-grow

해당 속성은 자식에 적용하는 속성이다. 부모의 크기에 맞춰 얼마나 늘어날지에 대한 비율을 지정한다.

flex-grow

위그림처럼 부모의 크기에 맞춰 비율을 정하는데, item1 과 item2 공간을 제외하고 item3에 grow를 적용하여 남은공간을 채우도록 할수가 있다. 이외에도 grow에 비율을 다르게 한다면 좀더 많은 비율을 가지고 갈수가 있다. 기본값은 0이다.  여기서도 마찬가지로  주축에 따라 틀려지며 row일경우는 가로로 늘어나지만 column일 경우에는 세로비율을 차지한다.

 

flex-shrink

해당 속성은 자식에 적용하는 속성이다. 부모의 크기에 맞춰 얼마나 줄어들지에 대한 비율을 지정한다.

왼쪽 줄어들기전 / 오른쪽 줄어든후

shrink는 item 크기가 지정되어 있어야 작동하는것을 볼수가 있다. 만약 아이템의 크기가 지정되어 있는 상태에서 Container의 크기가 줄어들때, item크기에 영향을 주는 시점부터 줄어든 거리만큼의 비율에 맞게 감소된다. 위 그림에서 Container이 400, item들이 각각 크기를 200씩 가지고 있다. item은 부모크기에 딱맞춰 있기때문에 400 밑으로 줄어드는 시점부터 item은 shrink가 적용되는 시점이다. 여기서 Container의 크기가 310으로 줄였다면 90px정도가 줄어든것인데. item1은 shrink:1로 지정되어있으므로 90px  1/3인 30px 만큼 줄어들고 item3은 90px 2/3인 60px이 줄어드는것을 볼수가 있다. 기본값은 1을 유지하고 있다.

 

flex-basis

해당 속성은 자식에 적용하는 속성이다. 요소의 기본크기를 지정한다.

flex-basis

 

flex-basis는 주측에 영향을 받아 요소의 기본크기를 지정한다. row면 수평, column 수직 으로말이다. 그런데 이부분에서 의아한점이 많았다. width를 사용해도 flex-basis와 똑같이 작동한다. 그렇다면 어떤 점이 다를까 ? width로 지정된 요소안의 아이템이 더 큰 width를 가지면 당연히 부모요소를 넘어간다. (%를 제외한 나머지 단위인 px,em,rem같은 경우) 위그림에서 item1 과 item2의 경우 처럼 말이다. 하지만 item3과 item4의 경우는 다르다. item3은 flex-basis:200px를 지정하였음에도 item4가 width:250px를 가지면 자식을 따라서 늘어난다. 이러한경우에가 예기치 못한 발생이 발생할수 있으므로 기본값이 flex-basis: auto를 유지하고 width를 사용한다고들한다.

 

What are the differences between flex-basis and width?

 

align-self

해당 속성은 자식에 적용하는 속성이다. 개별적인 아이템의 교차축을 다시정의한다.

align-self

위와같이 부모요소에서 자식들을 flex-start로 정렬하였지만 item2에 개별적으로 align-self: flex-end를 적용하여 개별배치가 가능하다.

 

flex

해당 속성은 자식에 적용하는 속성이다. grow, shrink,basis 순서를 가지는 단축속성이다.

 

flex: 1를 적용하면 grow:1, shrink:1, basis:0 이적용되며, flex: 0 1 100px처럼 개별적으로 지정할수도 있다. 그림은 필요하지않다....

 

 

마치며....

내용은 별로 없어보여도 생각보다 정리하는데 오래걸렸다. 하나씩 다시 테스트 해보고, 그림까지 그리며 했으니 말이다.. 그래도 새롭게 알게된 정보도있고 좀더 flex에대해서 깊게 알게되었다. 가끔 가다가 내생각대로 움직이지 않는 부분또한 왜그랬는지까지 풀려버렸다. 이래서 무엇이든 어떤 용도에 쓰이는지 정확히 알고 써야하는지가 더 와닿는다.