[CSS3] 반응형 CSS - flex

flex 레이아웃 이란?

flex레이아웃은 css3의 속성 중 하나로, 웹 페이지를 이루고있는 요소들을 유연하게 정렬하고 배치하는데 사용되는 방법이다. 즉, 요소들을 효율적으로 배치 할 수 있기때문에 다양한 디바이스와 해상도에 대응하는 반응형 웹 사이트를 보다 간편하게 구현하는데 도움이 된다.

 

IE의 서비스가 종료된 시점인 지금에서는 grid와 함께 매우 적극적으로 사용해도 무방한 css3 속성이다.

---

속성

 

display: flex

-선택자 요소 안에 있는 컨테이너 항목을 내용에 따라 유연한 레이아웃으로 처리해준다.

-확인링크: https://jsfiddle.net/zsk3behm/

※ flex의 성질은 그대로 가져오되 인라인 타입으로 처리해주는 'display: inline-flex' 속성도 있다.

<div class="wrap">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

.wrap {
    display: flex;
    width: 100%;
    height: 300px;
    background-color: #eaeaea;
}

.wrap > div:nth-child(2n) {
	background: #ff00ff;
}

 

flex-diretcion

-레이아웃 항목의 방향을 설정한다.

-기본 값은 row(가로)이다.

-속성 값으로는 'row', 'row-reverse', 'column', 'column-reverse'가 있다.

-확인링크: https://jsfiddle.net/zsk3behm/1/

<div class="wrap">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

.wrap {
    display: flex; 
    width: 100%;
    height: 300px; 
    background: #EAEAEA;
    flex-direction: column;
}
.wrap > div:nth-child(2n) {
    background: #FFFF00;
}

 

flex-wrap

-레이아웃 항목의 흐름을 설정한다. 각 자식요소 항목의 가로 크기의 합이 부모 요소의 width보다 클 경우 적용이 된다.

-따로 설정해주지 않는다면 각 자식요소 항목의 width가 강제조정되어 한줄로 배치된다.

-기본값은 nowrap

-속성 값으로는 'nowrap', 'wrap', 'wrap-reverse'가 사용된다.

-확인링크: https://jsfiddle.net/zsk3behm/2/

<div class="wrap">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

.wrap {
  display: flex;
  width: 100%;
  height: 300px;
  background: #FFFF00;
  flex-wrap: wrap;
}

.wrap>div {
  border: 1px solid #000;
  flex-basis: 100px;
  flex-grow: 1;
}

 

flex-grow

-컨테이너 항복이 나머지 부분에 대하여 상대적으로 차지하는 정도를 숫자로 지정한다. 

-기본값은 0

-속성값으로는 숫자(number)가 들어간다.

-확인링크: https://jsfiddle.net/zsk3behm/3/

<div class="wrap">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

.wrap {
  display: flex;
  width: 100%;
  height: 300px;
}

.wrap>div:nth-child(1),
.wrap>div:nth-child(3) {
  flex-grow: 1;
  background: #EAEAEA;
}

.wrap>div:nth-child(2) {
  flex-grow: 2;
  background: #FFFF00;
}

 

flex-shrink

-컨테이너 항목이 나머지 부분에 대하여 상대적으로 축소하는 정도를 숫자로 지정.

-각 항목의 flex-basis 합계가 부모 요소의 width보다 큰 값이어야 결과가 적용된다.

-기본값은 1

-속성 값으로는 숫자(number)가 들어간다.

-확인링크: https://jsfiddle.net/zsk3behm/4/

<div class="wrap">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

.wrap {
  display: flex;
  width: 100%;
  height: 300px;
  background: #FFFF00;
}

.wrap>div:nth-child(1),
.wrap>div:nth-child(3) {
  background: #EAEAEA;
  flex-grow: 1;
}

.wrap>div:nth-child(2) {
  flex-shrink: 2;
}

 

flex-basis

-컨테이너 항목의 가로길이를 설정해주는 속성

-기본 값은 auto이며 컨테이너 항목의 내부 내용의 크기에 따라 결정된다.

-속성값으로는 'px','백분율(%)','content','ignore','auto' 등이 사용된다.

-확인링크: https://jsfiddle.net/zsk3behm/5/

<div class="wrap">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

.wrap {
  display: flex;
  width: 100%;
  height: 300px;
  background: #EAEAEA;
}

.wrap>div:nth-child(1),
.wrap>div:nth-child(3) {
  flex-grow: 1;
}

.wrap>div:nth-child(2) {
  flex-basis: 500px;
  background: #FFFF00;
}

 

※축약형 flex 속성

-위의 속성들 중 'flex-grow', 'flex-shrink', 'flex-basis'를 축약해주는 속성이 'flex'

-부모 요소 안에 있는 자식 항목이 차지하는 크기를 한번에 설정 할 수 있다.

-속성의 구조는 'flex: flex-grow flex-shrink flex-basis'이다

-기본값은 '0 1 auto'