[css] 반응형 레이아웃을 위한 flexbox 알아보기 (브라우저별 flexbox 사용하기)

display:flex 는 기존 방식에서는 구현하기 어려운 레이아웃을 쉽게 구현할 수 있게 해주는 css 요소이다.

특히 반응형 레이아웃을 만들 때 효과적인데 단점이라면 최근에 나온 요소이기 때문에 과거 버전의 브라우저에서는 동작을 하지 않을 수도 있다.

특히 IE11에서는 부분적으로 지원하기 때문에 display:-ms-flex 라고 추가적으로 명시해 주어야 한다.

display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;

만약 다음과 같은 화면이 있다고 생각해 보자.

<div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
</div>

여기에서 부모 요소(parent)에 display:flex를 주면 바로 아래의 자식 요소를 flex context로 만들 수 있다.

.parent{
    display:flex
}

여기서 많이 헷갈릴 수 있는 부분인데 flex-direction, flex-wrap, justify-content 등의 요소는 부모 요소에서 정의하지만 자식 요소에만 영향을 준다는 점이다.

 

 

부모 요소에 정의해야 하는 부분

 

1. flex-direction

flex-direction은 자식 요소 아이템들의 정렬 순서를 정의한다. 기본적으로 가로로 정렬하는 row, 세로로 정렬하는 column이 있다. display:flex를 최초로 정의했을 때 디폴트 flex-direction:row이다. 아래 이미지는 각각 부모 요소에 row, row-reverse,column,column-reverse를 적용한 것이다.

.parent {
  flex-direction: row | row-reverse | column | column-reverse;
}

 

2. flex-wrap

여기서부터는 flex-direction:row 로 설정했을 때를 기준으로 설명하겠다.

flex-wrap은 만약 아이템이 굉장히 많아서 부모 컨테이너의 width/height를 넘었을 때 어떻게 할지 정한다. 여기서의 defalut는 wrap이다.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

박스의 너비가 유동적으로 움직인다...! (화면 가로 너비가 작을 때)

 

 

3. justify-content

justify-content는 flex-dirction:row를 기준으로 가로 정렬을 담당한다.(flex-direction:row일 경우 세로 정렬!!)

이게 flex에서 가장 중요한 부분이라고 생각한다. 이 요소는 아이템을 제외하고 남은 row/column일 시 width/height의 공백 부분을 효과적으로 활용할 수 있게 해준다.

이미지로 확인하는 게 효과적이기 때문에 각각의 요소를 적용한 이미지로 화면의 변화를 확인해보자.

.parent {
  justify-content: flex-start | flex-end | center | space-between | space-around ;
}

 

4. align-items

align-items는 flex-dirction:row를 기준으로 아이템이 한 줄 일 때의 세로 정렬을 담당한다. 다음과 같이 .parent 요소에 height:200px를 주었다.

.parent {
  align-items: flex-start | flex-end | center
}

 

5. align-content

align-items와 비슷하지만 align-content는 아이템이 여러줄일 때 그 줄의 정렬을 한다.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around
}

 

자식요소에게 주는 요소

 

위에서 본 .item들을 감싸는 부모 요소 .parent 에 준 것들은 대체적인 레이아웃을 짜는데 도움이 되는 것 들이었다. 이 예제에서 자식 요소에 해당하는 .item 에 주는 css 요소들은 보통 각각의 요소에 지정해주면 편리한 것들이 많다.

 

1. order

이 요소는 각 자식 요소들이 부모 요소 내에서 flex-direction에 따라 보여지는 순서를 말한다. 기본적으로 모든 flex 아이템들의 order:0 이나 이 order는 음수를 적용할 수도 있다.

.item:last-child {
  order: -1;
}
.item:first-child {
  order: 99;
}

 

2. flex-grow

flex-grow 는 각 요소들이 한줄에 있을때 비율상으로 얼마나 더 차지할지를 나타낸다. 기본적으로 모든 item들은 flex-grow:1을 가지지만 2를 가진다고 반드시 다른 요소들의 2배가 되는 것이 아니라 item들의 width를 어떻게 주는지에 따라 달라진다.

.item:last-child {
  flex-grow: 2;
}

 

3. flex-shirk

flex-shirk 란 flex-grow 와는 반대로 작용한다. 각 요소들이 한 줄에 있을 때 비율상으로 얼마나 덜 차지할지를 정한다.

.item:last-child {
  flex-shrink: 2;
}

 

4. align-self

이 속성은 간단히 말해서 위에서 말한 align-item 을 자식 요소 하나에만 적용하는 것을 말한다. 그러므로 이 속성은 aligin-item 이 가지는 속성을 가진다.

.item {
  align-self: auto | flex-start | flex-end | center
}

.item:last-child {
  align-self: center;
}