flex-wrap, flex-grow, flex-shrink

6월 30일 태스크로 전체적인 프로젝트의 퍼블리싱을 보완하였는데 보완 과정에서 적용한 css 개념인 flex-wrap, flex-grow, flex-shrink 3가지에 대해서 정리하고자 한다. 현재는 하루에 개발한 내용 그리고 알고리즘 문제 해결 과정을 정리하고 있는데 이제는 프로젝트를 하면서 중요하다고 생각하는 프론트엔드 관련 개념 또한 정리하고자 한다. 그리고 앞으로 맘에 들지 않는 퍼블리싱 부분을 보완 할 계획이다.

 

일단 정리하기전에 flex의 핵심은 다음과 같다.

 

1. 자식 요소는 부모 요소의 flex 정렬방식을 따라간다.

✅ 본인 기준 부모요소의 영향을 받고 부모요소의 부모요소 에게는 영향을 받지 않는다.

2. 정렬방식은 부모 요소에, 크기와 높이는 자식요소에 적용한다.

✅ 그림을 보면 가장 바깥쪽 div에 정렬 방식을 지정해주고 내부 div에는 크기/높이를 설정해준다.

(ex. 부모요소에 justify-content: center, align-items: center, 자식요소에 width, height 지정

부모요소, 자식요소

 

<공식문서 참고>

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap#examples

flex-wrap - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow

flex-grow - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink

flex-shrink - CSS: Cascading Style Sheets | MDN

 

 

<flex-wrap>

개념: flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이다. 부모 요소에 flex-wrap 속성을 적용하게 되며 자식 요소들은 flex-wrap의 속성에 따라서 한 줄에 배치가 될지 여러 줄에 배치가 될지 결정된다.

 

✅ flex-wrap: nowrap ➡️ flex-container 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치한다.

✅ flex-wrap: wrap ➡️ flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치된다. nowrap 속성과 마찬가지로 요소가 배치되는 시작점은 flex-direction 에 의해 결정된다(ex. row 혹은 column). 그림의 경우는 정렬 방향이 가로 즉 row 이기 때문에 가로로 쭉 가다가 두번째 행으로 배치된다.

 

✅ flex-wrap: wrap-reverse ➡️ wrap과 동일하며 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치되는 것이다.

 

<flex-grow>

개념: flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다. 즉 부모 요소가 아닌 자식 요소에 적용하는 flex 속성이다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받는다. (ex. item 요소 3개가 모두 flex-grow:1 이라면 3개 모두 부모 요소 내부에서 동일한 크기를 가진다.

 

flex-grow: 1

 

<flex-shrink>

개념: flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다. 마찬가지로 부모 요소가 아닌 자식 요소에 적용하는 flex 속성이다. (ex. 첫 번째 자식 요소의 크기를 부모 요소 내부에서 현재보다 축소 시키고 싶다면? 첫번째 자식 요소에 flex-shrink: 2를 통해 축소 시킨다.)

 

첫 번째 자식 요소를 flex-shrink : 2로 설정해 축소

 

 

<프로젝트에 적용한 flex-wrap>

✅ 부모요소에 flex-wrap 적용 + justify-center 설정을 통해 행으로 배치되는 것과 가운데 정렬을 동시에 적용

✅ 첫 번째 행에 크기가 더 이상 적용 안되므로 두 번째 행으로 배치됌.

<div className="flex flex-wrap justify-center gap-4">
    {record.dayRoutes[day].map((trip) => (
      <TripCard
        key={`${record.id}-${day}-${trip.contentid}`}
        title={trip.title}
        places={trip.addr1}
        imageUrl={
          trip.firstimage ? trip.firstimage : trip.firstimage2
        }
      />
    ))}
</div>