CSS3 [CSS] flex-basis, flex-shrink, flex-grow 활용 -2 🔗 이전 내용flex-basis 알아보기 - 1flex-shrink, flex-grow 알아보기 - 2 📢 flex 단축 속성flex-basis, flex-shrink, flex-grow는 개별 속성으로 사용될 수 있지만 단축 속성인 flex를 사용하는 경우도 많다.몇개의 값을 사용할 지, 단위는 무엇으로 할 지에 따라 설정되는 속성이 달라진다. 위의 코드와 같이 span에 flex 속성으로 단일 값 1을 설정하였다. 이 경우 flex-grow에 값이 할당된다. 개발자 도구를 통해 아래와 같이 단축 속성에 설정 된 값이 어떤 속성에 할당되는지를 확인할 수 있다.(화살표를 클릭) 다음과 같은 규칙에 따라 설정된다. 단위를 작성하지 않은 경우한개의 값 : flex-grow 에 적용두개의 .. 2025. 7. 16. [CSS] flex-shrink, flex-grow 알아보기 -2 🔗 이전 내용flex-basis 알아보기 - 1 📢 들어가며flex-shrink와 flex-grow는 flex-basis와 더둘어 플렉스 컨테이너의 아이템의 사이즈를 결정한다. flex-basis로 기본 크기를 설정하고 flex-grow와 flex-shrink를 통해 남거나 모자라는 공간을 비율대로 조정한다. 개별에 대한 속성을 지정하기도 하지만 flex 속성을 사용해서 단축 속성으로도 많이 사용된다..grow { flex-grow: 1;}.shrink { flex-shrink: 1;}.item { flex: 1 1 0;} 🎠 flex-growflex-grow는 컨테이너 내에 잉여 공간이 발생했을 때, 각 아이템이 얼마만큼의 공간을 차지할지에 대한 비율을 설정한다. 기본 값은 0이고, 아이.. 2025. 7. 12. [CSS] flex-basis 알아보기 -1 📢 들어가며flex를 자주 사용하긴 하지만 flex-basis, flex-grow, flex-shrink에 대해서 정확하게 알지 못한 채로 사용했었다. 그래서 이참에 3가지에 대해서 정리를 해보려고 한다. 🎃 주 축(main-axis)와 교차 축(cross-aixs)먼저 주축과 교차축에 대한 개념을 알고 있어야 한다. flex는 방향에 따라 주 축과 교차 축이 결정된다.왼쪽 이미지가 row, 오른쪽 이미지가 column일 때의 주 축과 교차 축이다. 🎁 justify-content와 align-itemsjustify-content는 주축을 기준으로 컨테이너 안에 남는 공간이 존재할 때 어떻게 분배, 정렬할지를 결정한다.align-items는 교차 축을 기준으로 아이템을 정렬한다. 기본 값은 st.. 2025. 7. 11. 이전 1 다음
