flex
-
[Flex] 여러줄 묶음Development/CSS 2021. 5. 25. 23:51
이번에는 felx-wrap을 정리해보겠습니다. flex-wrap 속성을 사용해서 items를 한 줄 혹은 여러 줄로 만들 수 있습니다. flex-wrap의 default 값은 nowrap이기 때문에 container의 width에 따라서 가변 하면서 한 줄로 표시됩니다. (기본 값은 작성해주지 않아도 적용 됩니다) 아래 mozilla 사이트에서 브라우저 호환성과 예시를 참고해보시면 좋을 것 같습니다. https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap flex-wrap - CSS: Cascading Style Sheets | MDN CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내..
-
[Flex] 수평과 수직Development/CSS 2021. 5. 24. 23:56
css 속성 중 보다 쉽게 정렬할 수 있는 Flex에 대해 정리해보겠습니다. 먼저 아래 mozilla에서 설명해놓은 곳에서 브라우저 호환성을 확인하신 후 사용하시면 좋을 것 같습니다. https://developer.mozilla.org/ko/docs/Web/CSS/flex flex - CSS: Cascading Style Sheets | MDN flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. developer.mozilla.org 첫 번째로 가장 기본적인 수평과 수직으로 쌓는 방법입니다. Flex를 사용하여 수평으로 쌓는 방법 item1 item2 item3 .container { display: flex;..