55 0  

flex

Flex - это сокращеная запись 3 параметров:  flex-grow, flex-shrink и flex-basis.

winked Используется на практике очень редко!

Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis).


Для чего нужен?

Создадим два квадрата:

.kvadrat1 {flex: 2 1 250px;}
.kvadrat2 {flex: 1 2 250px;}


У обоих квадратов одинаковый flex-basis. Это значит, что они оба будут шириной в 250px (ширина контейнера: 500px плюс margin и padding).


Но когда контейнер начнет увеличиваться в размерах, первый квадрат (с большим flex-grow) будет увеличиваться в два раза быстрее, а второй квадрат (с наибольшим flex-shrink) будет сжиматься в два раза быстрее.


Пример.

Чаще всего flex используют чтобы задать одному елементу максимальную ширину из возможной, а другому минимальную.

Занимает максимальный обьем
минимум обьема

Исполняемый код:

<div class="contenttt"> <div class="mainerr"> Занимает максимальный обьем </div> <footer class="footerr"> минимум обьема </footer> </div> <style> .contenttt {padding:100px; display: flex; flex-direction: row; } .mainerr {flex: 1 0 auto; background:yellow;height: 100px;} .footerr {flex: 0 0 auto; background:green;height: 100px;} </style>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020