flex 썸네일형 리스트형 [CSS Layout] Flex box 3. justify-content 이전에는 wrap에 대해서 살펴보았습니다. 지난번 글 작성 이후 안에 코드를 넣어두었는데, 주석을 지워가면서 확인해보시면 실제로 어떻게 나오는지 확인하시기 쉬우실 것 같아요. [CSS Layout] Flex box 2. wrap [CSS Layout] Flex box 2. wrap [CSS Layout] Flex box 1. 기본 방향_flex-direction [CSS Layout] Flex box 1. 기본 방향_flex-direction w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정.. jaehyunshin.tistory.com 변수 이름은 flex-wrap: 기본값은 nowrap 부모 바깥으로 넘어가지 않게 묶기.. 더보기 [CSS Layout] Flex box 2. wrap [CSS Layout] Flex box 1. 기본 방향_flex-direction [CSS Layout] Flex box 1. 기본 방향_flex-direction w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정하지 않고도 유연성있는 반응형 레이아웃 구성을 할 수 있도록 해준다는게 있어요. 모던 웹브라우져 jaehyunshin.tistory.com 지난번에 이어서 이번에는 wrap 이라는걸 살펴볼겁니다. 먼저 간단히 복기를 해보면, flex-direction을 통해서 자식 요소들을 행, 열 또는 반대 순서대로 배치하는걸 살펴볼 수 있었고, 그걸 통해 간단한 홈페이지의 구성도 쉽게 만들 수 있었죠. 이번에는 내부 요소들의 .. 더보기 [CSS Layout] Flex box 1. 기본 방향_flex-direction w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정하지 않고도 유연성있는 반응형 레이아웃 구성을 할 수 있도록 해준다는게 있어요. 모던 웹브라우져에서는 거의 다 지원되는데, I.E 10에서는 지원이 잘 안되는 경우가 있다는 Naver D2 2019년 기록이 있네요. 모바일웹에서는 문제없다고 하고, 다른것들에 비해 배우기도 쉬워서, 회사에서 퍼블리싱작업할 때 이걸 사용하기도 했습니다. 여러 사이트에서도 찾아서 예시를 볼 수 있으니 참조해보시면 좋겠습니다. 1. 편한 에디터를 열어서 index.html 을 만들어줍니다. 1 2 3 A Flexible Layout must have a parent element with the d.. 더보기 이전 1 다음
