목록flex-grow (1)

Simple Is Best

14. 레이아웃 방법 3. flex

이전 포스팅에서는 레이아웃 배치 2가지 방법에 대해 학습했었습니다. 1. float : left; 2. display : inline - block; 본 포스팅에서는 레이아웃 배치를 굉장히 쉽게 쓸 수 있게 해주는 flexbox에 대해서 학습하겠습니다. 우선 flex를 사용하기 위한 기본 구조부터 알아보겠습니다. flex를 사용하기 위한 구조 1. flex-box들을 모두 감싸는 flex-container의 클래스명을 가진 div 태그 2. flex-box : flex-box는 어떤 태그로 선언하던 간에 display : block 속성을 가지고 있기 때문에 기본적으로 한 행을 전부 차지(회색 박스) 따라서, 겉으로 보기에는 박스들이 세로로 배치되는 것처럼 보입니다. 이를 코드로 표현하면 다음과 같습니다..
HTML & CSS 2021. 7. 8. 11:45
이전 Prev 1 Next 다음