[웹1]240126-12일차(flex, vscode 시작)

카테고리 없음

[웹1]240126-12일차(flex, vscode 시작)

yeanana 2024. 1. 26. 12:45

[코드펜 열기]

Create a New Pen

Behavior Auto Save If active, Pens will autosave every 30 seconds after being saved once. Auto-Updating Preview If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update. Format on Save If enabled, your co

codepen.io

https://codepen.io/limyena/pen/bGZYdMQ

flex-grow

...

codepen.io

flex-item은 row값일때 width: auto = 0이다.

flex-grow : 너비를 비율에 맞춰 나누어준다.

정렬은 flex-container

너비높이는 flex-item

그래서 flex- grow는 flex-item에 적용

https://codepen.io/limyena/pen/MWxOwdw

flex-grow 비율 망가짐 방지(flex-basis)

...

codepen.io

flex-grow를 사용하게되면 하위요소 크기에 따라 비율이 달라진다.
방지하는 방법은 flex-grow와 flex-basis: 0;을 함께 사용하면 된다.
flex-basis: 0;과 width: 0;은 비슷한 역할을 하게되는데 반응형 할때
불편하게 때문에 width: 0;말고 flex-basis: 0;을 활용하는것이 좋다.