Боюсь, я не могу понять, как развиваться. Если вы перейдете к JSFiddle ниже - как я его понимаю, .big должен быть в три раза больше другого .flex-item. Как видите, не так. Почему?
.flex-container {
display:flex;
padding:0 20%;
}
.flex-item {
flex-grow:1;
list-style-type:none;
border:1px solid black;
}
.big {
flex-grow:3;
}<ul class="flex-container">
<li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
<li class="flex-item">Not really working like expected I don't think...</li>
</ul>Вы также должны указать значение для flex-basis (не указывая это свойство, чтобы поведение было похоже на использование начального значения, auto),
Добавьте flex-basis: 0; для обоих детей или просто установите его с помощью стенограммы:
.flex-item {
flex: 1; /* flex-basis is 0 if omitted */
}
.big {
flex-grow: 3;
}
Flex-grow обычно неправильно понимается таким образом. Flex-grow контролирует только то, как распределяется пространство слева от места между элементами гибкости, а не насколько они пропорциональны друг другу.
То, что вы ищете, действительно так:
.flex-item {
width: 25%;
list-style-type:none;
border:1px solid black;
}
.big {
width: 75%;
}
См. также
Авторы рекомендуют контролировать гибкость, используя сокращенную гибкость, а не с гибким выражением напрямую, так как стенография правильно сбрасывает любые неуказанные компоненты для общего использования.
https://drafts.csswg.org/css-flexbox/#propdef-flex-grow
.flex-item {
flex: 1;
}
.big {
flex: 3;
}
Это рабочий пример