[CSS] display : flex 정리(flexbox)

flexbox(flex)

 

 

1. 개요

일반적으로 웹페이지의 레이아웃은 css의 display, float, position 등과 같은 속성을 사용해 구현하는데, 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 굉장히 복잡해집니다.

 

이러한 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것이 css3에 추가된 flexbox입니다. flexbox를 사용할 경우 요소의 크기와 순서를 유연하게 배치할 수 있습니다.

 

 

 

2. 특징

flexbox는 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산 시킬 수가 있습니다.

이러한 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다.

 

 

.flex_container{
  display: flex
}

 

flexbox는 위와 같이 display: flex속성을 주는 것으로 만들 수 있습니다.

display: flex속성이 적용된 요소는 flex container가 되고, flex contatiner의 자식 요소는 자동적으로 flex item이 됩니다.

이러한 flex item의 위치는 주축(main axis)에 따라 정렬됩니다. 주축의 방향은 flex container의 flex-direction 속성으로 결정하는데, 기본적으로는 row 속성으로 지정이 되어 있습니다.

 

row 속성은 왼쪽에서 오른쪽 방향으로, column 속성은 위에서 아래방향으로 주축을 지정합니다.

이런 flexbox의 전체적인 정렬과 흐름 속성은 부모인 flex container에서 정의하고, 크기나 순서에 관련된 속성은 자식 요소에 해당하는 flex-item에서 정의합니다.

 

 

이것을 분리해서 적용하는 것이 가장 중요합니다.

-       flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-center

-       flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order

 

이러한 flexbox는 internet explorer 10 이상이 지원하는데, 지원을 하지 않는 브라우저도 있습니다. 대체적으로 모바일 브라우저는 flexbox를 지원합니다.

 

 

 

 

 

3. 예제

3-1. 스크롤 없는 100% 레이아웃

코드펜 : https://codepen.io/witblog/pen/MqGNeM

 

 

위 header와 nav의 높이는 고정되어 있고, 좌측의 메뉴 영역을 뺀 나머지 영역 전체를 자식 요소가 채우는 레이아웃입니다.

이 레이아웃에서 만약 파란색 부분의 콘텐츠의 길이가 길어지면 브라우저에 스크롤 막대가 나타나는 것이 아니라, 콘텐츠 영역에서 나타나게 됩니다.

.flex_container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex_item {
  flex: 1; /* flex: 1 1 0 */
  overflow: auto;
}

 

사용하는 속성은 위와 같고, flex container에 flex-direction: column속성을 적용해 header, nav 등 flex item을 수직으로 정렬합니다.

 

콘텐츠 부분에는 flex:1 속성을 적용해 flex item이 빈공간을 채우게 합니다.

 

여기서 사용된 flex:1 속성을 통해 자식 요소의 크기를 확장할 수가 있는데, 이 속성은 flex-grow, flex-shrink, flex-basis 속성을 축약한 표현입니다.

 

.flex-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.flex-item {
  flex: 1;
  /* flex: 1 1 0 */
}

위 css는 동일한 속성을 뜻합니다

 

 

flex-grow 속성은 속성값이 0이면 flex container 크기가 커져도 flex item의 크기가 커지지 않고 원래대로 유지되는데, 속성값이 1이상이면 flex item의 원래 크기에 상관 없이 flex container를 채우도록 flex item의 크기가 커집니다.

 

 

 

flex shrink 속성은 속성값이 0이면 flex container 크기가 작아져도 flex item의 크기가 줄어들지 않고 원래 크기가 유지되는데, 속성값이 1이상 이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞게 줄어듭니다.

 

 

flex-basis 속성은 flex item의 기본 크기를 결정하는 속성으로, px, %, em, rem 등 모든 단위를 속성값에 사용하며 flex item의 크기가 단위에 맞게 고정됩니다.

 

 

이때, flex-basis 속성의 값을 auto로 설정하면 flex item은 상대적 flex item(relative flex item)이 되어 콘텐츠의 크기를 기준으로 크기가 결정됩니다.

 

 

 

 

 

 

 

 

3-2. 내비게이션 영역

코드펜 : https://codepen.io/witblog/pen/WgJVGY

.flex-container {
  display: flex;
}

.flex-item {
  flex: none;
  /* flex: 0 0 auto */    
}

.flex-item-gnb {
  margin-left: auto;
}

 

위의 네비게이션 바를 구성할 때 사용된 css 속성입니다.

크기가 고정되어야 하는 flex item에는 flex: none속성을 적용합니다. 오른쪽으로 정렬할 버튼(gnb)에 해당하는 요소에는 margin-left: auto 속성을 적용합니다.

 

여기서 사용된 flex:none 속성은 flex-grow:0, flex-shrink: 0, flex-basis: auto 속성을 축약해 표현한 것입니다. 앞에서 설명한 flex: 1과 비슷한 느낌이지요.

 

flex 속성에 사용되는 속성은 아래와 같습니다.

 

-       initial(기본값) : flex container의 크기가 작아지면 flex item의 크기가 작아집니다. 하지만 flex container의 크기가 커져도 flex item의 크기는 커지지 않습니다.

-       none: flex item의 크기가 커지거나 작아지지 않습니다. flex container의 크기에 영향을 받지 않고, flex item의 원래 크기를 유지합니다.

-       auto: flex container의 크기에 맞추어 flex item의 크기가 커지거나 작아집니다.

-       숫자값: flex container를 일정한 비율로 나눠 가지면서 flex container의 크기에 따라 flex item의 크기가 커지거나 작아집니다.

 

 

 

 

 

3-3. 브라우저 화면 아래에 붙는 푸터

코드펜 : https://codepen.io/witblog/pen/yxjmaW

푸터는 보통 브라우저 화면 맨 아래에 위치합니다. flexbox를 사용해 항상 화면 아래에 표시되는 푸터를 만들 수 있습니다.

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex_item {
  margin-top: auto;
}

 푸터에 해당하는 요소에 margin-top: auto 속성을 적용하면 됩니다.

 

 

 

 

 

 

3-4. 정렬이 다른 메뉴

코드펜 : https://codepen.io/witblog/pen/dqKbMK

보통 헤더에서 좌측에 메뉴, 가운데에는 타이틀, 우측에 자세한 설정과 같은 버튼을 사용하는 UI를 구성하곤 합니다.

이때 첫번째와 마지막 요소는 양끝, 두번째 요소는 중앙에 위치하는데, 이때 flex container에 justify-content: space-between속성을 적용합니다.

.flex-container {
  display: flex;
  justify-content: space-between;
}

jutify-content 속성을 사용하는 것으로 flex item을 수평으로 정렬할 수 있습니다.

-       flex-start : 주축의 시작부분을 기준으로 flex item을 정렬

-       center : 주축의 중앙을 기준으로 flex item을 정렬

-       flex end : 주축의 끝부분을 기준을로 flex item을 정렬

-       space-around : 주축을 기준으로 flex item을 일정한 간격으로 정렬

-       space-between : 첫번째와 마지막 flex item은 주축의 시작 부분과 끝부분에 정렬하고, 나머지 flex item은 일정한 간격으로 정렬

 

 

 

 

 

 

3-5. 폼 레이블 수직 중앙 정렬

코드펜 : https://codepen.io/witblog/pen/aaKoBV

 

폼 요소의 레이블(텍스트)들을 수직에서의 중앙으로 정렬하는 레이아웃입니다.

위와 같이 텍스트를 1줄, 2줄 등으로 설정할 때 사용합니다.

.flex_container {
  display: flex;
  align-items: center;
}

 

폼 레이블(Label)에 해당하는 요소에 align-items: center 속성을 적용합니다.

 

여기서 align-item의 속성은 주축을 기준으로 flex item을 수직으로 정렬합니다.

 

 

-       stretch(기본값): flex item의 높이를 늘려 flex container의 전체 높이를 채웁니다.

-       flex-start: 교차축의 시작 부분을 기준으로 flex item을 정렬합니다.

-       center: 교차축의 중앙을 기준으로 flex item을 정렬합니다.

-       baseline: 글꼴의 기준선인 baseline을 기준으로 flex item을 정렬합니다.

-       flex-end: 교차축의 끝부분을 기준으로 flex item을 정렬합니다.

 

 

 

 

 

 

 

3-6. 유동적인 너비 박스

flex container인 부모 요소 크기에 따라 flex item인 자식 요소의 크기가 콘텐츠의 크기보다 줄어드는 레이아웃입니다.

 

코드펜 : https://codepen.io/witblog/pen/oPyvEa

 

웹 페이지의 크기가 유동적으로 변할 때, 부모 요소의 크기와 자식 요소의 크기가 변하도록 할 수 있습니다.

 

.flex_container {
  display: flex; 
}

.flex_item {
  /* flex : initial */
  max-width: 300px;
}

 

flex item에 max-width: 300px를 선언합니다.

 

 

 

 

 

 

3-7. 말줄임과 아이콘

코드펜 : https://codepen.io/witblog/pen/eLKOrG

 

flex container인 부모 요소의 크기가 작아 flex item인 자식 요소의 텍스트를 모두 표현할 수 없을 때 줄임표가 나타나게 하는 레이아웃입니다.

.flex_container {
  display: inline-flex;
  max-width: 100%;
}

.text {
  /*flex: 0 1 auto*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

flex container에 display : inline-flex속성과 max-width: 100%속성을 적용합니다.

 

위에서 사용된 display: inline-flex 속성은 flex container를 인라인 블록 요소로 만드는 속성입니다. 일반적으로 display: flex 속성을 사용하게 되면 블록 요소가 되어 브라우저 화면의 한줄 전체를 차지하게 되지만, 인라인 블록 요소는 한줄의 일부 영역만 차지하는 특성을 가지고 있습니다. 

 

flex container에 적용한 max-width: 100% 속성은 flex item인 텍스트 영역의 길이가 유동적으로 변할 수 있게 합니다.

그래서 텍스트가 아이콘을 제외한 나머지 공간을 가득 채우게 됩니다.

택스트 영역이 줄어들 때 나타나는 줄임표 아이콘은 text-overflow: ellipsis속성으로 구현합니다.

 

 

 

 

 

 

3-8. 위아래로 흐르는 목록

자식 요소를 위 아래로 먼저 정렬하고, 자식 요소가 부모요소를 벗어나면 줄을 바꿔 다시 위아래로 정렬하는 레이아웃 입니다.

코드펜 : https://codepen.io/witblog/pen/vzrBVw

 

.flex_container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}

 

flex-direction: column속성을 사용하면 flex item들이 위에서 아래로 정렬되게 됩니다.

여기서, flex-wrap: wrap 속성을 사용해서 flex item이 flex container의 크기를 벗어났을 때 줄을 바꿔서 배치할 수 있도록 합니다.

 

 

justify-content: space-around속성, align-content: space-around속성을 사용해 item들을 균등한 간격으로 정렬합니다.

 

align-content 속성은 flex item이 여러줄로 나열되어 있을 때, 주축을 기준으로 수직 정렬 방법을 설정하는 속성입니다.

-       stretch(기본값): flex item의 높이를 늘려 flex container의 전체 높이를 채웁니다.

-       flex-start: 교차축의 시작 부분을 기준으로 정렬합니다.

-       center: 교차축의 중앙을 기준으로 정렬합니다.

-       flex-end: 교차축의 끝부분을 기준으로 정렬합니다.

-       space-around: 교차축을 기준으로 flex-item을 일정한 간격으로 정렬합니다.

-       space-between: 첫 번째와 마지막 flex item은 교차축의 시작 부분과 끝부분에 정렬하고 나머지 flex item을 일정한 간격으로 정렬합니다.

 

 

여기서 주의해야할 부분은 flex-direction: column 속성으로 주축이 세로로 전환되었기 때문에 정렬 기준도 전환된다는 점입니다.

 

 

 

 

 

 

3-9. 가로세로 비율을 유지하는 반응형 박스

브라우저 크기에 따라 박스의 가로세로 크기가 동일한 비율로 늘어나거나 줄어드는 반응형 레이아웃입니다.

코드펜 : https://codepen.io/witblog/pen/LJrPoq

 

.flex_container {
  display: flex;
  flex-wrap: wrap;
}

.flex_item_list {
  flex-basis: 33.3%;
  display: flex;
  flex-direction: column;
}

.flex_item_image {
  flex: auto;
  /*
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  */
}

여기서 flex-basis: 33.3%속성을 지정해서 자식 요소의 비율을 고정합니다.

 

또한 이미지 박스가 유동적으로 반응할 수 있도록 flex: auto속성을 적용합니다.

 

flex: auto 속성은 flex: 1 1 auto 속성과 같습니다. flex container의 크기가 커지면 flex item의 크기도 커지고, flex container의 크기가 작아지면 flex item의 크기도 작아집니다.

 

 

 

 

 

 

 

참고

https://d2.naver.com/helloworld/8540176