Flexbox-қа арналған практикалық тапсырма: ата-аналық элемент display:flex, ені 700px және әрқайсысының ені 300px болатын балалары бар. Көк элементке flex-shrink: 0 қосқанда визуалды түрде не өзгереді?

Егер ата-аналық элемент display:flex және ені 700px болса, ал оның балаларының әрқайсысының ені 300px болса, онда қосымша стильдерсіз олар бір жолға сыйып кетуге тырысады. Үш элементтің ені 300px-ден 900px (900px > 700px), сондықтан flex-контейнер әдепкі бойынша қысылуды (flex-shrink) қолданады.

Көк элементке flex-shrink: 0 қосқанда:

• Көк элемент қысылмайды және оның ені 300px қалады.
• Басқа элементтер (flex-shrink: 0 емес) 700px-ке сыйу үшін қысылуы керек.
• Егер қысылусыз элементтердің жалпы ені 700px-ден көп болса, онда көк элемент 300px қалпында қалады, ал қалғандары ені азаяды.

Көрнекі түрде, бұл көк элемент өзінің енін сақтайды, ал қалғандары 300px-ден аз болады, контейнерге сыйу үшін. Егер көк элемент мысалы, соңғы болса, ол қысылмайды, ал қалғандары қысқарады.