display flex

· css
이번 포스트는 item에게 주는 속성을 알아볼거에요유용한 속성들이 많으니 집중해봅시다 1.flex-basis 👉 아이템의 기본크기 아이템의 기본 크기를 정할때 씁니다 #container{ display: flex; background: rgb(248,243,239); } .item{ flex-basis:200px; border: 1px solid #000; font-size: 133px; } flex-basis 를 주면 아이템이 너비가 200px로 변하죠?flex기반에서는 flex-basic 이 width 값보다 우선순위가 높기 때문에 flex-basic으로 기본크기를 지정해주는게 좋습니다. 기본값 auto 2.flex-grow 👉 아이템의 너비 비율 css작업하다보면 각 요소에 비율을 주고 싶을때 넓이..
· css
css로 작업을 하다 보면 block요소를 수평으로 주고싶을때 float나 inline-block 을 많이 씁니다 사실 이 방법으로 많이 쓰다보면 float 같은 경우에는 부모요소에 float해제도 시켜줘야하고 .. (귀찮고 비효율적) flex는 굉장히 유연하고 요소의 정렬,방향,크기,순서 까지 제어 할 수 있어요. 사실 쓰다 보면 신세계..!! 왜그런지 같이 공부해볼까요?? 이번 포스트는 부모에게 속성을 적용해 요소들이 배치가 되는 속성들을 배워볼 거에요. 집중 ~~ 1.flex 사용방법 : display:flex flex를 사용하기 위해선 컨테이너와 그 의 자식 을 만들어주어야 합니다. container 안에 item요소들을 만들어줄게요 1 2 3 4 5 위에 처럼 만들어 주었다면 flex를 적용볼게..
이챙(leechaeng)
'display flex' 태그의 글 목록