» » » flex-grow - Коэффициент роста
60 0  

flex-grow - Коэффициент роста

Свойство flex-grow определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства.

Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.


love Примерно размер можно расчитать так. 1 - это самый меньший размер. 2 - в два раза больше единицы.

Пример:

<style>
#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}

.box {flex-grow: 1;}
.box1 {flex-grow: 2;}
</style>

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

flex-grow 



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

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

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