[ CSS ]📌 레이아웃 뿌셔뿌셔 ( "FLEX", GRID, FLOAT 😫)

 

---

 

🔖부모 요소 적용 Flexbox 속성들

※ 대표적 속성 
display :  flex ;   // 정렬 축 정하기

 

[ display : flex ]

의 경우, 자식 요소들의 컨텐츠 width 만큼만 차지하고, height은 부모 요소 높이만큼 늘어납니다. 

배치는 가로 방향으로 배치됩니다. ( inline 요소들처럼)  그래서 height가 내용물에 따라 자동으로 늘어나는 특징은 컬럼같은 경우 많이 적용한다고 합니다. 

 

 

flex-direction : 정렬 축 정하기
flex-wrap : 줄 바꿈 설정하기
justify-content : 축 수평 방향 정렬    // row (col)일때, 가로(세로)방향에서 자식 요소들을 어떻게 배치할 건지 
align-items : 축 수직 방향 정렬        // row (col)일때, 세로(가로)로는 어떻게 정렬 시킬 지

 

 

👆

부모 요소에 적용해야 하는 속성들은 자식 요소들의 정렬과 관련

자식 요소에 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련

👇

 

 

🔖자식 요소 적용 flex 속성 

flex:   < grow : 팽창>    <shrink : 수축>      <basis : 기본 크기>

---

* 기본 값 
flex : 0 1 auto;

 

01. flex-grow

정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소(box들)어떠한 비율로 늘어나서 남은 공간을 차지할지를 정하는 속성이라고 생각하면 됩니다. 

 

02. flex-shrink

grow와는 반대로 설정한 비율만큼 박스 크기가 작아집니다. ( 비율이 클 수록 비례해서 작아진다는 의미) 

 

※ 단, flex-grow 속성과 flex-shrink속성은 함께 사용하는 일은 권장 X

 

flex-shrink 속성은 width 나 flex-basis 속성에 따른 비율로 실제 크기를 예측하기 어렵기 때문에 기본적으로는 flex-grow 속성으로 비율을 변경하고 flex-shrink 속성은 기본값인 1로 두어도 무방합니다. 

 

 

03. flex-basis

자식 박스가 flex-grow / flex-shrink에 의해 늘어나거나 줄어들기전에 가지는 " 기본 크기 " 입니다. basis로 기본 크기를 지정하면 그 크기는 유지됩니다. 

기본값은 auto 이기 때문에 따로 설정하지 않으면 컨텐츠의 크기에 따라 사이즈가 자동으로 결정 됩니다. 

 

 

➡️ flex-basis와 width의 미묘한 차이! 

     : (우선순위 上) flex-basis는 좀 더 유연한 칭구 / (우선순위 下) width는 강제적인 칭구 

 

➡️ 이번에야말로 CSS FLex를 익혀보자

 

➡️ PoiemWeb [ CSS 레이아웃 ]

 

➡️ PoiemWeb [ FlexBox 레이아웃 ]