flexbox

수업

웹프로그래밍 - 4-2. flexbox 아이템에 적용하는 속성들

이전 글에서는 container에 적용하는 속성들에 대해 알아봤다. 2023.04.03 - [수업] - 웹프로그래밍 - 4-2 Flexbox란? 웹프로그래밍 - 4-2 Flexbox란? 3/23 수업 container에 적용하는 속성들 display: flex; - 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다. - item을 inline으로 만듦. - height은 container의 높이만큼. display: inline codingtoday.tistory.com 아이템에 적용하는 속성들 1. flex-basis - flex 아이템의 기본 크기 설정 - flex-direction이 row일 때는 너비, column일 때는 높이 - auto: 해당 아이템의 width값..

수업

웹프로그래밍 - 4-2 flexbox 컨테이너에 적용하는 속성들

3/23 수업 container에 적용하는 속성들 display: flex; - 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다. - item을 inline으로 만듦. - height은 container의 높이만큼. display: inline-flex; - container를 inline으로 만듦. 더보기 inline-flex를 사용하지 않고 이전 페이지의 레이아웃을 구현하는 방법? 새로운 div를 만들어서 두 div를 감싼다. css에 display: flex를 추가한다. (felx-wrap : 줄 넘김.) flex-direction : 배치 방향 설정 - row, row-reverse, column, column-reverse flex-wrap: 줄넘김 처리 설정 -..

eunslog
'flexbox' 태그의 글 목록