728x90 300x250 flex코딩4 flex-shrink 속성 flex-shrink 속성은 flex-grow속성이 남는 공간을 분배해서 나눠가지는 것이라면 flex-shrink 속성은 반대로 공간을 넘어갈 경우에 각 아이템들을 줄이는 방법을 설정하는 것입니다. 기본값은 1이고 속성값이 1 이상이라면 부모 컨테이너의 크기가 flex 아이템보다 작아질 경우 부모 컨테이너에 맞춰서 크기가 줄어들게 됩니다. html 1번째 item Lorem ipsum dolor sit amet 2번째 item vero rerum dicta alias voluptates vitae quod veniam obcaecati 3번째 item css .container { width: 500px; } .item { display: flex; flex-direction: column; justif.. 2021. 11. 10. flex-basis과 width 차이 flex-basis에 대한 설명은 앞 포스팅을 참고하세요 flex-basis는 기본 크기를 설정하는 것이고 width는 가로 값을 설정하는 속성이라 얼핏 비슷해 보입니다. .item:nth-child(1) { flex-basis: 200px; } .item:nth-child(2) { width: 200px; } 아래와 같이 1번째 item에는 flex-basis를 2번째 item에는 width를 설정하고 결과를 확인해보면 차이가 없기 때문에 그게 그거 아닌가 하는 생각이 들 수 있습니다. 그럼 구지 따로 쓸 필요가 없겠죠? flex-basis과 width 차이점 1. flex-direction 설정값에 따라서 달라진다. 그렇다면 flex-direction을 변경해 주면 어떻게 될까요? .container.. 2021. 11. 9. flex-basis란? flex-basis flex-basis속성은 flex 아이템의 기본 사이즈를 지정하는 속성입니다. 기본값은 auto이기 때문에 설정하지 않으면 컨텐츠의 크기에 따라서 사이즈가결정되게 됩니다. html 1번째 item Lorem ipsum dolor sit amet 2번째 item vero rerum dicta alias voluptates vitae quod veniam obcaecati 3번째 item css .item { flex-basis: auto; } 이렇게 flex-basis값이 기본값인 auto로 지정된 경우 컨텐츠 사이즈에 맞춰서 나타납니다. flex-basis는 width에서 사용하는 모든 단위(px, %, em, rem 등)을 사용할 수 있습니다. .item:nth-child(1) { .. 2021. 11. 8. css flex코딩 align-items align-items 는 세로로 정렬하는 속성입니다. stretch(default값) .container{ display:flex; align-items: stretch; height:100vh; background: gainsboro; } end .container { display: flex; align-items: end; height: 100vh; } start .container { display: flex; align-items: start; height: 100vh; background: gainsboro; } center .container { display: flex; align-items: center; height: 100vh; background: gainsboro; } baseli.. 2021. 11. 2. 이전 1 다음 728x90 반응형