# 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로 동시에 색을 바꾸기도 함!
- 요소의 기본값은 꼭 알아야함! ✨
📌 출처
박영웅 강사님 실시간 강의
'Front-end > HTML & CSS' 카테고리의 다른 글
[CSS] Grid로 배치하기 (0) | 2023.11.20 |
---|---|
[CSS] CSS 라이브러리 - Styled Components, CSS Module (0) | 2023.02.08 |
[HTML] WAI-ARIA (0) | 2023.01.12 |