[CSS] Flexbox 전반적인 팁

#Float -> Flexbox (플로트보다는 플렉스박스가 대세!)

float : 이미지와  텍스트를   배치하기  위한 스킬

문제는 플로트는 비효율적이라는 것이다. 
'flex (or flexbox)가 탄생하고 부터.....

#flex를 쓰자 (마법이다) 

:두 가지만 이해해도 큰 그림 이해 가능하다

 

 

Container  =>  안에 자식 요소로 item이 있음  

 

 

 

ref, source : https://www.webtips.dev/flexbox-in-css (How to master Using FlexBox in CSS

•    속성값 존재 (박스에 지정하는 것)  
  
  • Display
  • Flex-direction
  • Flex-wrap
  • justify-content
  • align-items 등 
• 아이템에 지정하는 요소 존재 
  
  • Order
  • Flex-grow
  • Flex-shrink
  • Flex
  • align-self 등

---

 

고급 스킬, 알아두면 쓸데 있는  좋은 Higher Skills or Tips

 

---

 

 * Flex-wrap + width 33.3%  
 : 카드 뉴스, 상품 리스트 만들 때 알아두면 매우 좋은 팁 

 

쓰기 좋은 상황

※정치와 무관합니다 (허핑턴 포스트 클론 코딩 중에 캡쳐한 사진)

깔끔하게 컨테이너 width를 나눠가진 items (자식 리스트, 컨텐츠)들을 만들어낼 수 있다.

 

 

*Align-items : baseline; 

: 베이스라인 속성을 먹이면 첫 번째 아이템을 기준으로 맞춰짐 

 

쓰기 좋은 상황 

 

텍스트 설정할 때 좋을 것으로 보여짐 

 

 

 

*Align-self 

:   플렉스 항목의 우선 align-items 값입니다. 그리드에서는 그리드 영역 내부의 항목을 정렬합니다 . Flexbox에서는 항목을 교차 축 에 정렬합니다 . (MDN에서 말한 정의인데 직접 눈으로 보는게 이해가 편할 듯하다.)

 

 

item1만 flex가 지정한 기존 규칙에서 떨어져나왔다.

컨테이너에 지정된 것을 벗어나서 아이템 하나만 지정된 곳으로 배치하고 싶을 때 쓰면 좋을 것이다.