FLEX란?

부모 요소 하위의 자식들을 가로 혹은 세로로 정렬해준다. float와 inline-block 대용으로 사용할 수 있다. 단, IE에서는 사용 안 되는 속성도 있다. 자세한 지원사항은 https://caniuse.com/?search=flex 에서 확인 가능하다. HTML 구조 item01 01 02 item02 item03 flex container 속성 display .container{display: flex;} 기본적으로 부모 요소에 flex 선언이 되어있어야 한다. 선언을 하면 자식들이 inline 되었음을 확인할 수 있다. height 값은 컨테이너의 높이만큼 늘어난다. 이것이 float와의 차이점이다. 단, 직계 자손에게만 적용된다. 하위 요소도 또한 옆으로 정렬하고 싶다면 ul에 displa..

2022.08.31