꺾이지 않는 마음

[CSS] Flex 속성 알아보기 2 - Flex-grow [CSS] Flex 속성 알아보기 1 CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 i-do-dream.tistory.com flex-shrink는 flex-grow와 더불어 유연한 레이아웃을 가능케 하는 중요 속성이다. 지난 포스팅에 이어 이번에는 flex-shrink 속성에 대해 알아보자. #1. flex-shrink flex-grow가 컨테이너 내부 여백을 어떻게 처리할 지에 관한 속성이라면, flex-shrink는 item들이 컨테이너의 영역 크기를 초과했을 때 어떤 비율로 각 요..

[CSS] Flex 속성 알아보기 1 CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 않는다. flex와 grid가 훨 i-do-dream.tistory.com 지난 포스트에 이어서 이번에는 Flex items에게 주는 속성들을 정리해 보았다. justify-content, flex-flow, flex-wrap 등이 부모 요소인 Flex container에게 주는 속성이라면, 이번에 정리한 속성은 그 자식 요소인 item들 즉, 정렬되는 요소 자체에게 지정해서 사용하는 속성이다. 예시를 들기 위해 Flex container를 하나 만들어 보았다. ..

CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 않는다. flex와 grid가 훨씬 편하고 정교한 작업을 할 수 있기 때문이다. 이 둘의 차이점이라면 gird가 좀 더 정교한 작업을 할 수 있다는 거? flex는 1차원 레이아웃(수평과 수직 중 한 방향) 개념이고, grid는 2차원 레이아웃(수평과 수직 양 방향) 개념이다. 고로 좀 더 정교한 작업을 하려면 grid가 더 적합하다. 하지만 flex로도 충분히 괜찮은 레이아웃을 구현할 수 있기 때문에 현업에서는 상황에 맞게끔 둘 다 골고루 쓰이고 있다. 그래서 오늘은 flex 속성에 대해 정리해보았..