flex 로 레이아웃 정렬하기

 

 

 

css flex로 정렬하기

flex는 메인정렬과 교차정렬 개념이 필요합니다.
justify-content는 메인정렬, align-item은 교차정렬을 뜻합니다.

display:flex;
justify-content: center;
align-items: center;

 

위처럼 작성하면 수평과 수직으로 중앙에 정렬하게 됩니다.

display:flex; 를 사용하면 직계자식요소들도 영향을 받게 되는데 flex 대신 inline-flex를 사용하면 직계자식요소들을 감싸는 부모요소가 inline 요소가 됩니다.

flex 전에는 display:table;과 table-cell을 사용해서 수평, 수직 정렬을 하기도 했는데요.
아직 ie 7,8,9 에서는 지원하지 않아서 크로스브라우징에 문제되는 부분이 많음에도 불구하고 요즘 flex로 많이 넘어가는 추세인 이유는 모바일에서는 제약이 없어서 모바일 코딩할때 많이 사용하기 때문이라고 합니다.

flex-diection을 통해 가로정렬(row) 기준을 세로정렬(column)으로 만들 수 있습니다.

row (기본 값)	아이템이 수평방향(행)으로 흐름	방향성은 좌에서 우
row-reverse	아이템이 수평방향(행)으로 흐름	방향성은 우에서 좌
column	아이템이 수직방향(열)으로 흐름	방향성은 상에서 하
column-reverse	아이템이 수직방향(행)으로 흐름	방향성은 하에서 상

 

flex-wrap은 아이템 줄 넘김을 처리합니다.

nowrap (기본 값)	아이템을 한 줄에 모두 표현
wrap	아이템이 적정 길이 이상으로 길면 다음줄로 내려가서 표현
wrap-reversewrap	wrap과 같지만, 방향성이 반전되어 표현

flex-flow를 사용하면 flex-direction과 flex-wrap 속성을 단축해서 사용할 수 있습니다.
flex-flow: row nowrap; 처럼 처음값에는 flex-direction, 두번째값에는 flex-wrap 속성을 넣어줍니다.

 

justify-content는 수평방향(Main Axis)으로 정렬하는 방식을 말합니다.

flex-start	수평방향의 시작 점에 위치
flex-enter	수평방향의 끝 점에 위치
center	수평방향의 중앙에 위치
space-between	컨테이너 양쪽 끝을 기준으로 아이템 사이에 일정한 간격으르 만들어 정렬
space-around	컨테이너 안쪽 영역을 기준으로 각 아이템의 전, 후에 일정한 간격을 만들어 정렬

align-items은 아이템을 수직방향(Cross Axis)으로 정렬하는 방식을 말합니다.

flex-start	수직방향의 시작 점에 위치
flex-enter	수직방향의 끝 점에 위치
center	수직방향의 중앙에 위치
baseline	baseline에 맞춰 정렬
stretch	아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 

align-content는 한 줄을 넘기는 아이템들의 수직방향(Cross Axis) 정렬하는 방식입니다. align-item과 justify-content 속성을 모두 포함하고 있지만, 아이템이 한 줄을 넘지 않으면 이 속성은 효과를 내지 않습니다.

flex-start	수직방향의 시작 점에 위치
flex-enter	수직방향의 끝 점에 위치
center	수직방향의 중앙에 위치
baseline	아이템을 컨테이너의 baseline에 맞춰 정렬
space-between	컨테이너의 수직방향 기준으로 아이템 사이의 줄(행)을 일정한 간격을 두고 정렬
space-around	컨테이너의 양쪽 끝을 기준으로 각 아이템 줄(행)의 전, 후에 일정한 간격을 만들어 정렬
stretch	컨테이너의 수직방향 기준으로 각 행의 아이템 높이를 컨테이너 높이에 맞춤

 

flex Item (Children)

display: flex가 선언되어있는 컨테이너 안에 아이템이 가지는 속성에 대해 알아보겠습니다.

order는 컨테이너 안에서 아이템이 나열되는 순서를 선언합니다. 숫자가 작을수록 시작이며, 높을수록 끝에 위치합니다.

.item1 { order: -100 } .item2 { order: 1 } .item3 { order: 2 } .item4 { order: 3 } .item5 { order: 100 } // order 숫자가 적은 순부터 좌측정렬 됩니다.

 

flex-grow는 컨테이너에서 차지할 부피를 말합니다. 기본 값은 0이며, 숫자가 높을 수록 다른 아이템의 곱절로 부피가 늘어나는데요.

예를들어 grow 값이 3인 아이템은, grow가 1인 아이템 3개를 합한 크기가 됩니다.

기존에 float로 정렬한 후에 width:20%; 로해서 5개의 div 영역을 가로로 설정한것을 flex-frow를 사용하면 정렬하는 각 아이템에 flex-grow:1;만 똑같이 넣어주면 균등 분할됩니다.

 

flex-shrink는 flex-grow와 비슷하지만 계산 방식이 틀립니다. 기본 값이 1이며, 숫자가 높아질수록 다른 아이템보다 부피가 축소됩니다.

 

flex-basis는 아이템의 기본 크기 값을 선언합니다. px, em, rem, %(퍼센트) 모두 사용 가능합니다.

 

flex는 flex-grow, flex-shrink 그리고 flex-basis 속성을 한번에 기재합니다.

기본 값은 0 1 auto이며, flex-grow, flex-shrink, flex-basis 순으로 속성이 들어갑니다.

여기서 flex-shrink, flex-basis는 옵션값이여서 기재하지 않으면 자동으로 기본 값이 선업됩니다.

<style>
    .area { 
        display: flex;
        width: 100%;
        height: 50px;
    } 
    .area .item1 { 
        flex: 1;
        background: red;
    }
    .area .item2 { 
        flex: 2;
        background: blue;
    }
</style>


<div class="area">
    <div class="item1"></div>
    <div class="item2"></div>
</div>


// flex: 1은 flex-grow: 1과 같은 의미
// flex: 2은 flex-grow: 2과 같은 의미
// 렌더링을 해보면 area영역에서 item1이 3/1, item2가 3/2를 차지하는걸 볼 수 있습니다.

 

flex 참고하기 좋은 사이트 :

http://www.beautifulcss.com/archives/2812

Beautiful CSS » 포지셔닝 : Flexbox