Как работает flex-shrink в CSS. Подробное руководство

#Синтаксис

flex-shrink: <число>.flex-item { flex-shrink: 2;}

#Демо

Что мы видим в этой демке?

.flex-container{display: flex; width: 500px;} .flex-item-1{ flex-basis: 150px; flex-shrink: 1;}  .flex-item-2{ flex-basis: 200px; flex-shrink: 2;}  .flex-item-3{ flex-basis: 300px; flex-shrink: 3;}
Не обращайте внимания на мелкие неточности, в виде одних сотых пикселя -это из-за размеров браузера
.flex-container{display: flex; width: 500px;}.flex-item-1{ flex-basis: 150px; flex-shrink: 0.1;}.flex-item-2{ flex-basis: 200px; flex-shrink: 0.2;}.flex-item-3{ flex-basis: 300px; flex-shrink: 0.3;}
Не обращайте внимания на мелкие неточности, в виде одних сотых пикселя -это из-за размеров браузера

--

--

--

Надеюсь верую вовеки не придет ко мне позорное благоразумие. webdev/sports/books

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stas Bagretsov

Stas Bagretsov

Надеюсь верую вовеки не придет ко мне позорное благоразумие. webdev/sports/books

More from Medium

A Simply (Maximum-Performance⚡) GUIDE to OPTIMIZE your CSS

Blending a background image into page background in CSS

CSS Box Model: Border, Padding & Margin.

Optimising images for High DPI displays

Optimising Images for High DPI displays hero banner