flex2 03/10 HTML/CSS Flex (Order, Lines, Alignment) heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog shorthand for initial : 초기화 none : 다 없애고 싶을 때 flex-direction flex- wrap height의 한정이 필요하다 높이가 한정 돼있을 경우, cloumn에서 wrap옵션이 필요하다 wrap을 이용하면 컨텐츠를 유지하면서 다음열로 층을 나눠준다. column과 wrap을 축약해서.. 2021. 3. 10. 03/08 HTML/CSS (두 번째, 세 번째)방 설정, Flex 두 번째 방 설정 ( 박스의 기본 크기 / 박스 수평정렬 ) 100% : 부모의 높이를 그대로 차지함 header의 높이가 px가 아니고 %라면 부모%의 %.. (누적된다) min-height같은 경우 %로 할때 적용이 되지 않아서 inherit사용해주면 된다 위의 코드로 만들었을 때 so 왼쪽 오른쪽 둘다 마진을 auto로 해주면 가운데 정렬 된다 근데 최소 높이 설정되어 있는 body부분은 따로 min-height : inherit; 라고 써주어야 함 100% -> 부모의 퍼센트의 100%의 크기 inherit -> 부모의 퍼센트나 크기를 그대로 따라서 크기를 가진다. 부모가 50% -> inherit : 부모의 50% : 25% 50% -> 100% : 부모의 100% : 50% body에서의 in.. 2021. 3. 8. 이전 1 다음
