flexbox를 이용한 레이아웃

네이버 D2 사이트에 좋은 포스트가 있어서 이해하기가 수월했다. 원 포스트에서 이미지를 보면서 이해할 것
마침 만들고있는 방탈출 페이지의 테마 이미지들을 정렬하는데 유익하게 사용되었다.

flexbox란?

• 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.
• 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다.
• 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.

.flex_container {
  display: flex;
}

flex item(자식 요소)은 주축(main axis)에 따라 정렬된다. 주축의 방향은 flex container(부모 요소)의 flex-direction 속성으로 결정한다.

부모 요소와 자식 요소에 정의하는 속성 구분

flex container: 전체적인 정렬이나 흐름에 관련된 속성 적용

flex-direction, flex-wrap, justify-content, align-items, align-content

flex item: 자식 요소의 크기나 순서에 관련된 속성 적용

flex, flex-grow, flex-shrink, flex-basis, order

속성별 적용 예시

1. flex-basis

ex. 좋아요 count와 좋아요 버튼 사이에 거리를 두고 싶을 때

.summary-bottom > .like-count{
  flex-basis: 70%;
}

2. flex: 1 1 0 / flex: 1 (같은표현)

flex item의 크기와 관련된 속성이며,
flex-grow: 1 속성과 flex-shrink: 1 속성, flex-basis: 0 속성을 줄인 표현이다.

flex-grow

flex item의 확장에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다.
속성값이 0이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지된다.
속성값이 1 이상이면 flex contatiner의 크기가 커질 때 flex item의 크기도 함께 커진다. (flex item의 원래 크기와 상관 없이 flex container를 채우도록)

flex-shrink

flex item의 축소에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다. 기본값은 1이다.
속성값이 0이면 flex container의 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기로 유지된다.
속성값이 1 이상이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어든다.

flex-basis

flex-basis 속성은 flex item의 기본 크기를 결정하는 속성이다. 기본값은 auto다.
width 속성에서 사용하는 모든 단위(px, %, em, rem 등)를 속성값에 사용할 수 있다.
flex-basis 속성의 값을 30px이나 30%와 같이 설정하면 flex item의 크기가 고정된다.

flex-basis 속성에서 auto와 함께 자주 사용하는 속성값이 0이다.
flex-basis 속성의 값을 0으로 설정하면 flex item은 절대적 flex item(absolute flex item)이 되어 flex container를 기준으로 크기가 결정된다. 단! flex-basis: 0px, flex-basis: 0%와 같이 단위도 함께 설정해야 한다.

flex-basis 속성의 값을 auto로 설정하면 flex item은 상대적 flex item(relative flex item)이 되어 콘텐츠의 크기를 기준으로 크기가 결정된다.
(flex item 내부의 내용이 크면 많은 위치 자지, 적으면 적은 위치 차지)
(참조 사이트의 이미지 보며 이해)

flex: 1의 의미

flex: 1 속성은 flex: 1 1 0 속성을 의미한다. 즉, flex-grow 속성의 값이 '1'이고 flex-shrink 속성의 값이 '1'이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아진다는 의미다.

flex 속성의 값으로 정수 하나만 선언하면 선언한 값은 flex-grow 속성의 값이 된다. 나머지는 기본값인 flex-shrink: 1 속성과 flex-basis: 0 속성이 적용된다. 다시 말해 flex 속성에 한 개의 정숫값만 있으면 이것은 flex-grow 속성의 값만 지정하는 단축 속성이다. 즉, flex: 2는 flex: 2 1 0을, flex: 3은 flex: 3 1 0을 나타내다.

ex. 네이게이션을 구현하고 싶을 때

.flex-container {
  display: flex;
}
.flex-item {
  flex: none;
  /* flex: 0 0 auto */    
}
.flex-item-gnb {
  margin-left: auto;
}

flex: none 속성으로 자식 요소의 크기 고정
margin-left: auto 바깥 여백이 왼쪽의 모든 공간을 차지하기 위해 flex item을 왼쪽에서 오른쪽으로 민다.

margin: 0 auto: 바깥 여백이 flex item을 양쪽에서 밀기 때문에 flex item이 수평 중앙에 위치한다.
margin: auto 0: 바깥 여백이 flex item을 위아래로 밀기 때문에 flex item이 수직 중앙에 위치한다.

3.justify-content

주축을 기준으로 flex item을 수평으로 정렬한다. 다음과 같은 5개의 속성 값으로 다양한 수평 정렬 레이아웃을 만들 수 있다.

• flex-start(기본값): 주축의 시작 부분을 기준으로 flex item을 정렬한다.
• center: 주축의 중앙을 기준으로 flex item을 정렬한다.
• flex-end: 주축의 끝부분을 기준으로 flex item을 정렬한다.
• space-around: 주축을 기준으로 flex item을 일정한 간격으로 정렬한다.
• space-between: 첫 번째와 마지막 flex item은 주축의 시작 부분과 끝부분에 정렬하고 나머지 flex item을 일정한 간격으로 정렬한다.

4.align-item

주축을 기준으로 flex item을 수직으로 정렬한다. 다음과 같은 5개의 속성 값으로 다양한 수직 정렬 레이아웃을 만들 수 있다.

• stretch(기본값): flex item의 높이를 늘려 flex container의 전체 높이를 채운다.
• flex-start: 교차축의 시작 부분을 기준으로 flex item을 정렬한다.
• center: 교차축의 중앙을 기준으로 flex item을 정렬한다.
• baseline: 글꼴의 기준선인 baseline을 기준으로 flex item을 정렬한다.
• flex-end: 교차축의 끝부분을 기준으로 flex item을 정렬한다.

ex. 아이템 중앙정렬

방법1
.flex_container {
  display: flex;
  align-items: center;
  justify-content: center;
}
방법2 
.flex_container {
  display: flex;
}
.flex_item {
  margin: auto;
}

5. display: inline-flex

display: inline-flex 속성은 flex container를 인라인 블록 요소로 만드는 속성이다. display: flex 속성을 적용한 flex container는 블록 요소다. 블록 요소는 브라우저 화면이 한 줄 전체를 차지하지만, 인라인 블록 요소는 한 줄의 일부 영역만 차지한다.

ex. 말줄임과 아이콘

.flex_container {
  display: inline-flex;
  max-width: 100%;
}
.text {
  /*flex: 0 1 auto*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

max-width: 100% flex container에 적용하여 flex item인 텍스트 영역(.text 클래스)의 길이가 유동적으로 변할 수 있게 한다. 그래서 텍스트가 아이콘을 제외한 나머지 공간을 가득 채운다.
text-overflow: ellipsis 텍스트 영역이 줄어들 때 나타나는 줄임표

6. flex-wrap: wrap

flex-wrap은 flex item이 flex container를 벗어났을 때 줄을 바꾸는 속성이다.
white-space 속성과 동일하게 작동한다.
속성의 기본값인 nowrap은 flex item의 전체 크기가 flex container보다 커져도 줄을 바꾸지 않고 한 줄로 flex item을 배치한다.

ex. 위아래로 흐르는 목록

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

flex-direction 속성과 flex-wrap 속성을 다음과 같이 flex-flow 속성으로 단축해 사용할 수도 있다.

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

7.align-content

align-content 속성은 flex item이 여러 줄로 나열되어 있을 때 주축을 기준으로 수직 정렬 방법을 설정하는 속성이다. align-content 속성에 사용할 수 있는 속성값은 다음과 같다.
(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 속성으로 주축의 방향이 전환되었기 때문에 정렬 기준도 전환된다는 점이다. 수평 정렬의 기준은 align-content 속성으로 설정하고, 수직 정렬의 기준은 justify-content 속성으로 설정해야 한다.

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

.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_item_list 클래스)에 display: flex 속성을 적용해 항목 요소가 이미지 박스 요소(.flex_item_image 클래스)의 flex container가 되게 한다.
flex-basis: 33.3% 속성으로 자식 요소의 비율 고정
flex: auto 속성으로 반응형 이미지 박스 만들기

실제 적용

.search-bottom{
  border: 1px soloid black;
  height:40vh;
  width: 80vmax;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
}
.search-bottom > .themeImg{
  display: flex;
  flex-direction: column;
}
.search-bottom > .themeImg > img{
  height: 20vh;
  width: 13vmax;
  border-radius: 20px;
} 

---

참조사이트

[flexbox로 만들 수 있는 10가지 레이아웃]
https://d2.naver.com/helloworld/8540176