드림코딩 by 엘리_Flexbox

---

Flexbox

---

 

 

flexbox는 박스와 아이템들을 행 또는 열로 자유자재로 배치시켜 줄 수 있는 정말 유연한 개념 이다.

CSS의 꽃이라고 불린다.

박스가 커지면 각각의 아이템들이 어떤 식으로 커지면서 박스의 공간을 매꿔야 될지

박스가 작아지면 이 아이템들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 하는지를

자유롭게 정의 가능하며 너무 쉽게 그 모든것들이 가능하게 만드는 개념이다.

이 개념만 이해해도 웹사이트의 레이아웃을 쉽게 구성하는 것이 가능하다.

 

flexbox는 크게 2가지 개념을 이해하면 큰 그림이 이해가능하다.

첫번째 개념으로는

flexbox는 container 박스에 적용되는 속성값들이 존재하고

그리고 각각의 item들에 적용되는 속성값들이 존재한다.

 

 

container 박스에 꾸며줄 수 있는 속성값들은 위 이미지와 같다.

 

 

아이템에 지정되는 속성들은 위 이미지와 같다.

 

정리하면 flexbox는 박스에 지정하는 속성값들이 있고

박스안에 들어가는 아이템에 지정되는 속성값이 있다고 이해한다.

 

두번째 개념으로는 

flexbox 에는 중심축과 반대축이 있다는 것이다.

예를들어 수직과 수평선이 있다고 가정했을 때

flexbox 에서는 수직을 중심축이라고 지정 시 반대로 수평축은 반대축이 된다.

 

 

위 이미지 예제에서 아이템들이 왼쪽에서 오른쪽으로 정렬되어 있는데 

수평축이 메인축 즉 중심축이 되고 반대로 수직축이 반대축이 된다.

즉 내가 중심축을 수직에 두냐 수평에 두냐 따라서 반대축이 바뀐다.

 

100% vs 100vh

 

 

.container의 height을 100% 변경 시 height가 사라지는 것을 볼수있다.

%로 변경시 아이템에 맞게 높이 지정되어 있는것을 볼 수 있는데

그것은 %는 .container가 들어있는 부모의 높이에 100%를 채우겠다는 의미이다.

부모에 상관없이 나는 아이템을 보이는 viewport height에 100%를 다 쓰겠다는 의미가 100vh 이다.

 

container 속성값들

flexbox에는 container에 들어가는 속성값과 각각 아이템에 들어가는 속성값으로 나눠져있다.

 

 

flexbox로 만들고 싶다면 display를 flex로 설정해준다.

설정 시 아이템들이 자동적으로 왼쪽에서 오른쪽으로 정렬된다.

 

그 다음으로 container level의 속성값인 flex-direction의 기본값은 row이다.

row는 왼>오 방향이고 row-reverse는 오>왼 방향이다.

이렇게 설정 시 중심축은 수평축이 되며, 중심축을 바꾸고 싶다면 flex-direction을 column으로 변경해준다. 

column은 위>아래 방향이고 column-reverse는 아래>위 방향이다.

변경 시 중심축은 수직축이 된다.

 

flex-wrap의 기본값은 nowrap이다.

만약에 html에서 아이템들이 더 많이 있었다면 아이템들이 자동적으로 한 줄에 빼곡하게 붙어있다.

아무리 화면이 작어져도 아이템들이 한 줄에 붙어있다.

이것은 wrapping을 안하겠다고 지정되어 있기 때문이다.

flex-wrap을 wrap으로 바꾸게 되면 아이템들이 한 줄에 꽉차게되면 자동적으로 다음 라인으로 넘어간다.

wrap-reverse 설정시 위에서 부터 아래로 wrapping 된다.

 

flex-flow는 flex-direction과 flex-wrap을 합친 개념이다.

즉 한번에 묶에서 작성가능하다.

 

이때까지는 flexbox로 보여주고 그다음에 전체적인 방향 내가 수평이 중심축인지 수직이 중심축인지 결정을 하고

그리고 wrapping 한줄에 가득차면 다음줄로 넘어가게 할것인지 안할것인지 알아봤다.

 

 

다음은 아이템들을 어떻게 배치 할 것인지에 대해 알아보자.

 

justify-content는 아이템들을 어떻게 배치 할 것인지를 결정해 준다.

default값으로는 flex-start를 갖고 처음부터 왼>오 방향을 갖는다.

만약에 수직축이 중심축이라면 위>아래 방향으로 나오게 되어있고,

flex-end는 오른쪽 축으로 아이템들을 배치한다.

flex-end는 아이템들의 순서는 유지하되 오른쪽으로 배치하고 flex-derection이 column 이게 되면 순서는 유지하되 밑에서 부터 배치되게 된다. 

center 라고 지정하게 되면 아이템들을 center에 맞춰서  넣고,

space-around 는 아이템 박스를 둘러싸게 spacing을 넣어주는 것이다. 

그래서 제일 왼쪽과 오른쪽에 있는 아이템 박스들은 딱 한줄만 들어가니까 space가 작고,

가운데 나머지 박스들은 조금 더 큰 spacing이 들어가는 것을 확인할 수 있다.

space-evenly 는 똑같은 간격을 넣어주는 것을 말한다. 

space-between 은 아이템 박스들 중 가장 왼쪽과 오른쪽 박스들을 화면에 맞게 배치하고,

중간의 아이템 박스들만 spacing을 넣어준다.

이 justify-content는 중심축에서 아이템들을 어떻게 배치할지 결정하는 것이다.

 

align-items 는 반대축에서 아이템들을 배치하는 속성이다.

이 속성값으로는 baseline이 있는데 baseline에 맞춰서 아이템을 배치 가능하다.

 

align-content 는 justify-content와 비슷하지만 justify-content는 중심축에서 아이템들을 배치한다면 

align-content는 반대축의 아이템을 지정하게 된다.

justify-content의 속성값들을 전부 사용할 수 있다.

 

item 속성값들 

아이템 각각의 속성값들로 이해한다.

 

 

order 속성이 지정 가능하다.

기본값은 0 이다.(아이템이 html에서 나온 상태 그대로 정렬되어 있다.)

각각의 아이템에 order값을 정해주면 순서가 각각의 order에 맞춰서 바뀌는것이 확인 가능하다.

하지만 현업에서 많이 사용하지 않는다.

 

 

다음 속성이 중요한데 flex-grow 이다.

이 flex-grow를 쓰지않으면 아이템은 원래의 사이즈를 유지하고 있다.

container가 아무리 커져도 원래 사이즈를 유지하다가

container가 너무너무 작아지면 어쩔수없이 한 줄에 다 꽉 차있어야 되니 조금씩 작아지는 것을 볼 수 있다.

하지만 자신의 고유한 크기를 유지 할려고 한다.

이 속성에 값을 주면 container를 꽉 채울려고 아이템들이 늘어나게 된다.

기본값은 0 이다. 그래서 아이템들이 상자의 공간을 매꿀려는 노력을 하지 않는다.

현재 첫번째 아이템만 flex-grow의 값을 1로 지정했기 때문에 2,3 번째 아이템들은 자신의 고유한 사이즈를 유지하고 있다.

여기서 2,3 번째 아이템들의 flex-grow의 값을 1로 지정 시 골고루 container에서 아이템들이 사이즈가 늘어난다.

 

flex-shrink 는 container가 점점 작아졌을 때 어떻게 행동하느냐를 지정한다.

기본값은 0이다.

그러나 각각의 아이템들의 shrink의 값을 1로 지정 시 

아이템들이 점점 줄면 어떻게 작아져야 되는지 표기가 된다.

 

 

여기서 아이템1의 shrink값을 2로 지정 시 2,3 번째 아이템보다 더 많이 줄어든것을 볼 수 있다.

이렇게 flex-grow와 flex-shrink는 container의 사이즈가 바꼈을 때,

아이템들이 얼마나 어떻게 더 줄어들고 늘어나야 되는지를 정의하는 속성들이다.

 

 

flex-basis는 아이템들이 공간을 얼마나 차지해야 되는지 조금더 세부적으로 명시할 수 있게 도와주는 속성이다. 

default는 auto 이고,

gorw와 shrink의 지정 된 값에 맞춰서 변형되지만,

gorw, shrink 값을 쓰지않고,

basis 속성값을 %값을 줌으로써 커질때도 점점 작아질때도

container의 width에 따라서 각각의 아이템의 %에 맞춰 나눠서 차지한다.

 

container level 에서는 justify-content, align-item, align-content 를 통해서 아이템들을 골고루 배치 가능하다면

align-self를 이용해서 아이템별로 아이템들을 정렬 가능하다.

container에 지정된 것을 벗어나서 아이템 하나만 특별하게 내가 배치하고 싶다면 align-self 속성을 사용한다.

 

summery :)

flexbox는 container에 꾸며주는 속성값들이 있고, 아이템 각각을 꾸며줄수 있는 속성값들이 있다.

flexbox에는 두가지의 축이 있는데 하나는 중심축, 반대축이 있다.

이 축은 수평이냐 수직이냐 에 따라서 바뀌어질 수 있다. (중심축과 반대축이 바뀔 수 있다는 의미이다.)

 

Flaot

float의 원래 순수 목적은 이미지와 텍스트를 어떻게 배치할지에 대해서 정의하는 개념이 었다.

그래서 float: left 지정시 이미지가 왼쪽에 배치되고

텍스트들이 이미지를 감싸면서 배치될 수 있도록 하는것이 float 이다.

float은 left 외 center, right 정렬 가능하다.

예전에는 많은 사람들이 flaot을 이용해서 박스들을 배치하였다.

하지만 이것은 float의 순수 목적에는 어긋난다.

이제는 flexbox가 있기때문에 float은 원래의 목적인 텍스트와 이미지들을 배치하는 용도로 쓰여지게 된다.

 

float CSS 속성은 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 한다.

element는 페이지의 정상적인 흐름에서 제거되지만 여전히 흐름의 일부로 남아 있다.

 

float는 block layout 의 사용을 의미하므로 경우에 따라 표시 값의 계산된 값을 수정한다.

 

유용한 사이트

color tool : https://material.io/resources/color

Color Tool - Material Design

 - 다양한 팔레트에 색이 있는데 원하는 색을 지정해 보면 다양한 UI적으로 어떻게 보여질수 있는지 확인 가능하다.

 

a complete guide to flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox

 

flexbox game : https://flexboxfroggy.com/#ko

Flexbox Froggy