[CSS] Flex 속성

먼저 MDN Document를 읽는다. CSS - flex 속성은 보통 "Flexible Box"라고 읽는다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

 

"display : flex" 속성은 하나의 플렉스 아이템이 자신의 컨테이나거 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.

 

기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않는다. min-width, min-height

 

 

컨테이너에 display 속성 flex만 입력하면 바로 가로 배치가 됨

 

브라우저 창의 크기를 조절했을 때

자동적으로 (flexible하게) item들의 위치가 조정된다.