[CSS] Flex로 정렬하기

 

# Flex

 

• 1차원 레이아웃으로 수직, 수평 정렬 둘 중 하나만 할 때 사용
• flex요소는 계속 중첩해서 사용할 수 있음!
• 주 축으로 정렬하던 교차 축으로 정렬하던 여백이 있어야 사용 가능하다.  

 

# Flex 구분하기

• container (부모 요소)
• item (자식 요소)
• 정렬을 하기 위해서는 자식 요소를 부모 요소로 감싸주어야 한다.

 

# Flex Container (부모요소에 적용)

 

1. display

• flex
• inline-flex

 

2. flex-direction (방향)

• row : Itmes을 수평으로 표시한다. (✨기본값)
• row-reverse : 수평에서 Itmes의 순서를 역방향으로 표시한다. 
• column : Itmes을 수직으로 표시한다.
• column-reverse : 수직에서 Itmes의 순서를 역방향으로 표시한다. 

 

💡 기본적으로 수직으로 아이템이 흐르는데 굳이 column을 사용하는 이유는 무엇일까?

→ 자식요소 아이템들의 배치를 자유롭게 하기 위해서!

 

3. flex-wrap (줄바꿈)

• nowrap : 모든 Itmes을 한 줄에 표시한다. (✨기본값)
• wrap : Itmes을 줄 바꿈 해서 두 줄로 표시한다. 
• wrap-reverse : Itmes을 줄 바꿈 해서 두 줄로 표시하고 역방향 표시한다. 

 

4. justify-content (주 축)

• flex-start(start) : Itmes을 시작 점으로 정렬한다. (✨기본값)
• flex-end(end) : Itmes을 끝 점으로 정렬한다.
• center : Itmes을 가운데로 정렬한다. 
• space-around : 각 Itmes의 좌우에 동일한 여백을 줘서 정렬한다.
• space-between : 처음과 끝에 Itme을 붙이고 나머지 여백에 동일한 여백을 줘서 정렬한다. 
• space-evenly : 모든 방향에 동일한 여백을 줘서 정렬한다. 

 

5. align-content (교차 축)

• Itmes가 여러 줄이고 여백이 있을 경우에 사용한다. 
• stretch : 교차 축을 채우기 위해 Itmes을 늘려준다. (✨기본값)
• flex-start(start) 
• flex-end(end)
• center
• space-around
• space-between
• space-evenly

 

6. align-items (교차 축)

• Itmes가 한 줄이고 여백이 있을 경우에 사용한다. 
• stretch (✨기본값)
• flex-start(start)
• flex-end(end)
• center
• baseline : Itmes을 문자 기준선으로 정렬한다.  (거의 사용되지 않음)

 

---

# Flex Items (자식요소에 적용)

 

1. order

• 숫자 : Item의 순서를 설정하며 숫자가 클수록 뒷 순서로 간다. (✨기본값)

 

2. flex-grow

• 숫자 : Item의 증가 너비 비율을 설정한다.  
• ✨기본값 : 0 
• 증가된 만큼 남는공간을 비율에 맞게 가져간다.
• 쉽게 0은 너비가 증가하지 않는다.

 

3. flex-shrink

• 숫자 : Item의 감소 너비 비율을 설정한다. 
• ✨기본값 : 1
• 보통 0 과 1만 사용한다.
• 쉽게 0은 너비가 감소할 수 없고 1은 감소할 수 있다. 

 

4. flex-basis

• 숫자 : Item이 가져야 하는 너비, Item의 기본너비를 설정한다.
• ✨기본값 : auto
• Item이 가진 넓이가 자동으로 상속된다.
• 단위 : px, em

 

5. align-self

• 일부 Item만 정렬한다. 
• auto : align-items 속성을 상속받는다. (✨기본값)
• stretch
• flex-start(start)
• flex-end(end)
• center
• baseline

 

🚨주의

flex: 1; 이라는 flex 단축요소를 사용했을 때 어떻게 될까?

flex-flow : 1, flex-shrink:1, flex-basis:auto 라고 생각하겠지만 flex-flow : 1, flex-shrink:1, flex-basis:0 이 되니 주의하자.

단, 일정한 비율로 정확히 쓰고 싶을 때는 유용하게 사용할 수 있다. 그러나 넓이는 무시되고 비율이 적용되는 점은 알아두어야 한다.

 

---

# 예제

 

See the Pen Untitled by lee (@dlrmawn) on CodePen.

 

• 한 줄에 버튼과 검색창이 있을 때 검색창을 버튼 크기를 제외한 나머지 부분을 꽉 채우고 싶을 때 flex-grow: 1;을 적용 해준다. (기본값은 0, 1은 늘어나게 하는 것)
• 버튼의 경우 브라우저의 창 크기가 줄어들수록 버튼의 크기가 줄어들며 망가지게 되는데 flex-shrink의 기본값이 1이기 때문이다. 이 때 flex-shrink:0;을 적용해 해당 크기 이하로 줄어들지 않게 해주면 된다.
• flex-shrink는 쓸 일이 없어보여도 꽤 많이 사용된다.
• 이처럼 flex-grow, flex-shrink가 같이 쓰이는 경우가 많다.

 

---

💡

• 명시적 - 직접 / 암시적 - 자동
• flex 같은 암시적인 단축 속성을 사용하는 것 보다 각각의 요소를 명시적으로 사용하는 것이 좋다. 
• border color의 기본색상은? 글자색상의 상속을 받는다. → 그래서 color로 동시에 색을 바꾸기도 함!
• 요소의 기본값은 꼭 알아야함! ✨

 

 

 

📌 출처

박영웅 강사님 실시간 강의

CSS Flex 완벽 가이드