flexbox 사용법

안녕하세요

flexbox사용법을 소개합니다.

flexbox는 점점 대세가 되어갈 레이아웃을 잡는 방법입니다.

기존에는 float left, right, display : table-cell 심지어 css에 *을 붙여 핵을 쓰기도 했었습니다.

이제 반응형을 포함하여 모든 브라우저에 동일하게 레이아웃을 잡을 수 있습니다.

이제 flexbox 사용법과 관련 속성을 설명합니다

부모태그에 display : flex;를 줍니다. (display : inline-flex;도 가능)

<div class='parentNode'>

<span>bizXpress</span>

<span>webponent</span>

</div>

.parentNode {

display: flex;

}

여기에 부모에 줄수 있는 css 속성들이 몇가지 있습니다.

flex-direction: row || column || row-reverse || column-reverse;  

-- 자식요소들의 방향

 flex-wrap: wrap || no-wrap || wrap-reverse; 

-- 자식들이 늘어나서 부모가 넘칠경우, 줄바꿈을 할지의 여부

justify-content: flex-start || flex-end || center || space-between || space-around

-- 정렬기능입니다. 좌우 간격을 동일하게 놓거나 자식이 모든 간격값을 동일하게 가질수도 있습니다

align-items: flex-start || flex-end || center || stretch || baseline

-- 세로 정렬이라고 생각하면 됩니다.

자식들(item)에 줄 수 있는 속성들입니다.

order : html을 변경하지 않고, css로 재정렬(sortable)할 수 있다.

flex-grow : 여분의 공간이 있을 때 확장시켜준다 ( 0 or 1 )

flex-shrink : 여분의 공백이 없다면 축소 시킨다. ( 0 or 1 )

flex-basis : 초기 크기를 지정한다. grow나 shrink보다 앞서 계산되며 width값이 같는 값을 취한다.

flex shorthand : grow, shrink, basis 를 동시에 수행한다. ex) flex: 0 1 auto;

여기까지는 굉장히 많은 양의 내용들을 압축해서 

요점만 설명한 내용입니다.

조금더 세밀하게 컨트롤할 수 있는 align-self 속성을 소개하고 글을 마치겠습니다.

align-items 속성은 플렉스 내의 아이템들을 일괄적으로 정렬시켜줍니다.

그런데 특정 아이템 하나만 다른 효과를 주고 싶을때 align-self 속성을 사용합니다.

align-self 속성은 

auto || flex-start || flex-end || center || baseline || stretch

의 값을 가집니다.

각각의 값들은 플렉스 내에서 어디에 위치하는지를 보여줍니다.

예를 들어 세번째 아이템에 

align-self: flex-end;

를 적용하면 이렇게 됩니다.

<ul>

    <li>I am 1</li>

    <li>I am 2</li>

    <li class="now">I am 3</li>

    <li>I am 4</li>

</ul>

ul {

    display: flex;

    border : 1px solid blue;

    padding: 0;

    height: 300px;

}

li { 

  border: 1px solid red; padding: 10px; list-style: none; height: 50px;

}

.now {

  align-self: flex-end;

}

(js fiddle을 사용하였습니다)

flex-end를 적용하여 특정 아이템만 컨트롤 했습니다.

이런식으로 center, baseline, stretch 등을 사용한다면 

세밀한 작업도 진행할 수가 있습니다.

위 글은 

https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jrh1olct9

을 참고하였습니다.