Flex

내가 처음 웹퍼블리셔로 일을 하게 되었던 재작년

그땐 들어볼 일이 별로 없었던 것이

어느날 눈에 띄더니

계속 눈에 띄고 있다.

 

바로 flex-box 이다.

웹 브라우저에 표현되는 요소들은 기본적으로

수직방향으로 순차적으로 표현된다.

CSS를 다 걷어낸 상태의 HTML 문서를 

브라우저에서 열어보면 알 수 있다.

 

하지만 간혹 우리는, 그리고 우리의 클라이언트들은

어떠한 것들을 수평방향으로 나열하고 싶어한다.

 

그럴 경우 고전적으로

FLOAT을 이용하거나, TABLE, inline-block속성 등을 이용하여

이것들을 표현해왔다.

 

하지만 충돌 등의 문제가 있어왔고,

이 방법들은 그렇게 놓을 수 있는 대체방법이었을 뿐

수평으로 배치하는 것에 대해 제대로 정의된 속성이 없었다.

 

그러다가 나타난 것이 FLEX의 개념이다.

 

정말 쉽게 수평배치가 가능하다고 한다.

물론 그리 쉬워보이지는 않는다.

외워야 할것이 또 생긴것이다.

 

CSS는 더 이상 새로운 것을 입력하고 싶지 않았다.

하지만, 앞으로 flex의 사용은 늘어날 것이기 때문에 

익혀야 한다.

 

하지만, 내용이 많으므로, 제일 기본적인

아니 기본적으로 알아야겠다 싶은 것만 남겨보자.

왜냐면 난 지금 react native를 공부중이기 때문에

css에 많이 시간을 투자할 수 없다.

 

 

flex를 주기 위한 부모요소에 display:flex를 주면 된다.

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

기존에 이런식으로 ul을 이용하거나,

혹은 div를 이용하였다면,

flex를 사용할 때에는

<div class="boxWrapper">
    <div></div>
    <div></div>
</div>


<style>
    .boxWrapper{
    	display: flex
    }
    .boxWrapper > div{
    	flex : 1
    }
</style>

이렇게 감싸고 있는 아이한테 flex 속성을 주면 된다.

그리고, 그 자식요소에게는

주고싶은 비율을 주면 된다.

 

총 넓이에서, 각각 flex로 준 것 만큼의 비율로 분배해준다.

만약 요소개 네개 있고, 각각 1, 3, 4, 1

의 값을 줬다면 1+3+4+1 = 9

즉 총 넓이를 9로 나누어 배당한 flex의 수만큼을 곱해

넓이를 분배해주는 식이다.

형제요소들이 가진 각각의 flex 값을 더한 것을 분모에 담고,

각각이 가진 flex 값을 분모에 담아 비율을 뽑아주는 것.

 

그게 그거지만, 익숙해지면 기존 그리드방식 바탕의

반응형 제작 패러다임이 크게 바뀔 것 같다.

 

마찬가지로 이 flex는 수직으로도 동작한다고 한다.

 

위에 flex 값을 이야기하였지만,

정확히 증가 감소 기본 값을 설정할 수 있는데,

이건 좀 복잡하다. 

다음에 포스팅하도록 한다.