[복습]Flex 해버렸지 뭐야

네.... 해버렸습니다..... flex....

재밌어요 정말 재밌어요 하나 B.U.T

역시나 너무 어려웠습니다...... 방법은 하나뿐인 것 같네요. 정신 차리고 많이 해보자

너가 택한길이다 악으로 깡으로 버텨라

 

#1 float

---

• (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다
• 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치 되게 함

👍inline, inline-block의 요소에 float를 주면 블록요소로 적용되어 세로로 쌓이게 됨

 

 

👍left, right로 위치를 조절할 순 있지만 요소들의 부모요소의 높이 영향을 받지 않음
👍clear로 float를 해제할 수 있음 ex) clear: left;
👍부모요소의 높이를 받으려면 overflow: hidden;을 이용해서 상속 가능

A, B, C 와 container블럭의 높이가 다름

 

#2 flex

---

• display:flex
• 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법
• 부모 요소를 flex-container 자식 요소를 flex-item이라고 부름
• 1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용
• 기본적으로 row(가로) 축을 적용

 

 

flex-direction

• 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정
• row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)
• column: 위에서 아래 방향 (주축이 열 방향)
• row-reverse: 오른쪽에서 왼쪽
• column-reverse: 아래에서 위 방향

 

 

justify-content

• 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있음
• flex-start, flex-end, center, space-between, space-around, space-evenly

 

 

align-items, align-content

• align-items: 교차 축을 기준으로 정렬
• align-content: 컨테이너의 교차 축의 아이템들이 여러 줄일 때 사용 가능

 

 

flex-wrap

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

 

 

gap

• 아이템 사이의 간격을 조절

 

이해는 했지만 아직 자연스럽게 적용하는 게 어려운 것 같다. 지금 정리한 게 정확하게 정리한 건지 모르겠다.

조금 익숙해졌을 때 다시 한번 정리를 해봐야 할 것 같다.