몰까로그

display: flex; 레이아웃 배치를 위한 전용 기능으로 고안된 기능. 인터넷 익스플로러 구 버전에서는 지원 안 되기도 함. IE 10, 11 지원. box1 box2 box3 위와 같이 html 구조를 설정해, box들을 가로로 나란히 병렬하고 싶을 때. 부모요소인 container에 display: flex;를 적용해 사용. container가 flex의 영향을 받는 공간이며, 그 안에 자리잡는 item들이 설정한 속성에 따라 배치됨. ***** flex 적용 속성 ***** ◎ item 적용 속성 (1) flex-basis // 아이템 기본 크기 설정 flex-direction이 row일 때는 width를, column일 때는 height를 설정. width를 설정하면 아이템이 width보다 ..

display: flex; 레이아웃 배치를 위한 전용 기능으로 고안된 기능. 인터넷 익스플로러 구 버전에서는 지원 안 되기도 함. IE 10, 11 지원. box1 box2 box3 위와 같이 html 구조를 설정해, box들을 가로로 나란히 병렬하고 싶을 때. 부모 요소인 container에 display: flex;를 적용해 사용. container가 flex의 영향을 받는 공간이며, 그 안에 자리 잡는 item들이 설정한 속성에 따라 배치됨. ***** flex 적용 속성 ***** ◎ container 적용 속성 1) display: flex; // flex 선언 .container { display: flex; } 가로 방향으로 배치. item들의 width는 item이 가진 내용물 만큼, he..