본문 바로가기

flexbox2

FlexItem Properties - Flexible Box Layout(Flexbox) 예전글 "Flexible Box Layout(Flexbox) - Flex Container Properties" 에서 플렉스 컨테이너의 프로퍼티들에 대해서 알아보았습니다. 이번에는 플렉스 컨테이너 내부의 플렉스 아이템이 가지는 플로퍼티들에 대해서 알아봅니다. FlexItem의 프로퍼티는 다음의 여섯가지가 있습니다. 1. order정수를(-,0,+) 값으로 가지며, FlexItem의 순서를 지정할 수 있습니다. FlexItem이 컨테이너에 배치되는 기본 순서는 HTML태그를 추가한 순서가 됩니다. FlexItem의 order 프로퍼티를 사용하면 임의로 순서를 바꿀 수 있습니다. 주의해야 할것은 order는 보이는 순서에만 영향을 주지 탭순서등에는 영향이 없습니다. 2. flex-grow0이상의 실수를 사용.. 2018. 12. 3.
Flexible Box Layout(Flexbox) - Flex Container Properties Flexible Box Layout(Flexbox)은 스타일이 "display: flex;" 로 지정된 컨테이너 요소내에 자식 요소들을 배치하는 방법에 관한 CSS 입니다. 웹 페이지 레이아웃을 만드는데 있어서 기존에는 float를 많이 사용했는데, 사용하기 힘든 점들이 있었습니다. Flexbox는 좀 더 강력한 레이아웃을 만드는 방법입니다. 하지만 많은 설정 요소들로 인해 사용이 쉽지는 않습니다. ul { display: flex; flex-direction: row; padding: 0; list-style-type: none; outline: solid 1px red; } li { width: 100px; height: 100px; background-color: lightgreen; margin:.. 2018. 10. 29.