[CSS] 플렉스박스(flexbox)

💡 플렉스 박스를 자유자재로 쓰기위해 레츠고!

---

🔍 flexbox란?

flexbox를 통해 박스와 아이템들을 행 또는 열로 자유자재로 배치시킬 수 있습니다.
flexbox는 컨테이너(container)와 아이템(item) 있습니다.

자세히 보려면 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

 

◎ container속성

<container>
* display (기본값:flex) 

* flex-direction (기본값:row)
	< row:열 / row-reverse:열-반대로 / column:행 / column-reverse:행-반대로 >
    
* flex-wrap (기본값:nowrap)
	< nowrap:랩핑안함 / wrap:랩핑함 / wrap-reverse:랩핑-반대로 >
    
* flex-flow 
	< flex-direction와 flex-wrap 한번에 작성 할 수 있음 >
    
* justify-content (기본값:flex-start)
	< flex-start:아이템들을 왼쪽에서 오른쪽으로 순서대로 왼쪽배치 / flex-end:아이템들을 왼쪽에서 오른쪽으로 순서대로 오른쪽배치>
    
* align-items (주축에서 배치)
	<center:중앙에 아이템 포장 / space-around:선이 플렉스 상자 양쪽 끝으로 균등 배분,양쪽 끝에 절반정도의 공간 생김 /space-evenly:항목을 균등하게 분배 항목 주위에 동일한 공간이 있음 / space-between:선이 플렉스 상자의 세로 양쪽 끝으로 균등 배분 / baselin: 기준선 정렬>
    
* align-content (교차축에서 배치)
	< center / space-around / space-evenly / space-between >

◎ item속성

<item>
* order (itme의 순서를 지정할 수 있음)

* flex-glow (아이템의 기본 너비를 자동으로 늘림)(기본값:0)

* flex-shrink (아이템의 기본 너비를 자동으로 줄임)(기본값:0)

* flex-basis (특정 아이템의 정렬을 따로 정함)(기본값:auto / align-items속성의 값을 상속받음) 
	< stretch / flex-start / flex-end / center / baseline >
* felx   
	< flex-glow, flex-shrink, flex-basis 한꺼번에 작성 가능 >
    
* align-self (item별로 item의 위치 지정할 수 있음)

 

◎ 주축(Main Axis)과 교차축(Cross Axis)

   - box들이 가로로 정렬 되있을 때

   

- box들이 세로로 정렬 되있을 때

 

 

◎ flexbox 연습할 수 있는 사이트

 

Flexbox Froggy

저도 한 번 해봤는데 24번째가 제일 어렵긴했는데 24개 미션 클리어 했습니다!!!! 

참고한 슨생님의 강의 : https://www.youtube.com/watch?v=7neASrWEFEM&t=1270s