[JAY⌨️CSS] 실무를 위해 작성하는 CSS flex 핵심 정리

 

 

1️⃣ flex의 구조

• flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃.
• 공간에 맞추기 위해 축소되거나 여백의 공간을 채우기 위해 변형된다. 즉 유연한 비율로 사이즈를 조정하는 기능!
• 부모 요소는 flex-container 자식 요소는 flex-item

 

 

flex의 기본 구조 (해당 이미지 출처는 위니브 수업 자료입니다.)

 

 

 

 

2️⃣ flex-direction

• 아이템을 배치할 때 주축과 방향을 지정!
• ➡️ row 기본값. 왼쪽에서 오른쪽 배치.
• ⬇️ column 위에서 아래로 배치.
• ⬅️ row-reverse 오른쪽에서 왼쪽 배치.
• ⬆️ column-reverse 아래에서 위로 배치.

 

 

 

3️⃣  Justify-content

• row, column의 주축을 기준으로 배치.
• flex-start 기본 값, 시작 축 기준으로 배치.
• flex-end 마지막 축 기준으로 배치.
• center 가운데 배치.
• space-between 양 끝 기준 요소들만 동일한 간격을 두고 배치.
• space-around 양 끝에 요소들과 동일한 간격 1개를 두고 배치.
• space-evenly 양 끝에 각각 요소들과 동일한 여백을 넣어 배치

 

justify-content 레이아웃

 

💡 space-around 와 space-evenly의 차이?
요소 사이에 계산된 동일한 여백을 양 끝에도 할당할 때
space-around 는 여백 1개 크기를 양 끝에 배치. 즉 50%씩 여백크기 할당.
space-evenly 는 처음과 끝에 각각 1개씩 여백크기를 할당.

 

 

 

4️⃣  align-items, align-content

• align-items 교차 축을 기준으로 배치.
• align-content flex-wrap:wrap 인 경우 교차 축 아이템들이 여러 줄일때 사용.

 

 

 

5️⃣  flex-wrap

• 한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정.

/* flex-container 에 flex-item 한 줄로 배치 */
flex-wrap : nowrap;


/* flex-container 최대 폭에 flex-item 의 크기가 다 할당되면 다음 행으로 넘기기 */
flex-wrap : wrap;


/* flex-direction, flex-wrap 단축속성 */
flex-flow: row wrap;

 

 

 

6️⃣  flex-basis

• 기본 값은 auto.
• px, em, % 등의 단위로 flex-item의 초기 사이즈 설정, 내부 콘텐츠에 따라 유연한 크기를 가진다.
• flex-basis 값이 적용되어있다면 row일 경우 width 값 무시, column일 경우 height 값 무시.

 

 

 

7️⃣  flex-grow

• 컨테이너 내부의 비율 지정! 기본 값은 0.
• 여백이 생겼을 때 값을 주면 숫자가 큰 비율대로 늘어나면서 영역을 채운다. 값이 0인 경우 늘어나지 않는다.
• flex-grow 와 같이 flex-basis:auto 초기값으로 사용하면. 정확하게 3등분 되는 게 아니라,
  grow + basis 의 사이즈 즉 컨텐츠의 사이즈가 더해져서 출력된다!
  flex-basis 에 사이즈를 입력해서 auto를 풀어주면 컨텐츠와 관계 없이 동일한 비율을 갖게 된다.

 

 

 

8️⃣ flex-shrink

• flex-grow와 동일한 기능으로 반대되는 개념. 기본 값은 1.
• flex-container 기본 설정에서 flex-item 을 계속 더하면 요소의 폭이 줄어든다. flex-shrink : 1 이 기본 값이기 때문.
• flex-shrink : 0; 을 설정하고 flex-basis 와 같이 사용하면 basis에 입력한 사이즈로 flex-item 의 크기가 고정된다.
• flex-item 에는 min-width:auto 가 강제된다! flex-shrink:1 기본 속성으로 요소 폭을 줄여서 비율을 맞추지만 요소크기가 최소 폭보다 큰 경우 container 에서 요소가 튀어나오거나, flex-basis 에 입력한 값이 적용되지 않는다. 이럴 때 flex-item 에 min-width:0; 을 적용해줘야한다!

 

 

 

8️⃣ flex 단축속성

• flex : flex-grow flex-shrink flex-basis 조합의 단축속성 사용 가능!

/* flex : flex-grow flex-shrink flex-basis */
flex: 1 1 100px;

 

 

flex-basis / flex-shrink / flex-grow 활용 예제. width 설정 없이 비율로만 레이아웃 만들기가 가능하다!

 

 

 

 

👩🏻‍💻  요약!

• 기존 CSS는 사이즈에 고정 값이나 비율 등을 직접 작성해야 했지만 flex를 사용하면 행과 열을 오가며 유연하게 리사이징 가능!
• flex-direction 을 통해 방향 지정하고 justify-content align-items 로 요소를 정렬
• flex-wrap 을 이용해서 한 줄에 모든 요소를 배치할 수 있다. 반응형을 구현할 때 유용.
• flex-shrink 는 요소를 축소시켜서 비율 정렬, flex-grow 는 요소를 확대시켜서 비율 정렬.
• flex-grow flex-shrink flex-basis 를 사용할 때는 기본 값을 어떻게 제어하는지가 관건. 자세한 내용은 본문 참고.
• flex-basis 는 아이템의 사이즈 설정! flex-shrink 와 함께 사용하면 입력된 사이즈는 고정되고, 나머지 영역만 확대,축소! 👍
• flex 예제를 구현해놓은 화면을 보고 싶다면 🔗 git pages에서 확인 가능 :)