Как получить flexbox для включения прокладки в вычислениях?
Ниже представлены две строки.
Согласно спецификации 1A + 1B = 2A
Но когда в вычисление включено дополнение, сумма неверна, как вы можете видеть в примере ниже.
Вопрос
Как заставить Flex-поле включить дополнение в его вычисление, чтобы поля в примере правильно выстроились правильно?
.Row{
display:flex;
}
.Item{
display:flex;
flex:1;
flex-direction:column;
padding:0 10px 10px 0;
}
.Item > div{
background:#7ae;
}
.Flx2{
flex:2;
}
<div class="Row">
<div class="Item">
<div>1A</div>
</div>
<div class="Item">
<div>1B</div>
</div>
<div class="Item Flx2">
<div>1C</div>
</div>
</div>
<div class="Row">
<div class="Item">
<div>2A</div>
</div>
<div class="Item">
<div>2B</div>
</div>
</div>
Ответы
Ответ 1
Решение:
Задайте margin дочернего элемента вместо padding в элементе flex.
.Row{
display:flex;
}
.Item{
display:flex;
flex:1;
flex-direction:column;
}
.Item > div{
background:#7ae;
margin:0 10px 10px 0;
}
.Flx2{
flex:2;
}
<div class="Row">
<div class="Item">
<div>1A</div>
</div>
<div class="Item">
<div>1B</div>
</div>
<div class="Item Flx2">
<div>1C</div>
</div>
</div>
<div class="Row">
<div class="Item">
<div>2A</div>
</div>
<div class="Item">
<div>2B</div>
</div>
</div>
Ответ 2
Как получить flexbox для включения прокладки в вычислениях?
В вашем коде добавление включено в вычисления.
Согласно спецификации 1A + 1B = 2A
Я не верю, что это правильно. Может быть, ссылка на ссылку для объяснения.
Свойство flex-grow
Когда вы применяете flex: 1 к элементу, вы используете свойство стенограммы flex, чтобы сказать следующее:
-
flex-grow: 1
-
flex-shrink: 1
-
flex-basis: 0
flex-grow указывает гибкому элементу, чтобы использовать свободное пространство в контейнере.
Вот ваш код:
.Item {
display: flex;
flex: 1;
flex-direction: column;
padding: 0 10px 10px 0;
}
В первой строке padding-right: 10px применяется к элементам три.
Во второй строке padding-right: 10px применяется к двум гибким элементам.
Следовательно, в первой строке 10px меньше свободного места для распространения. Это нарушает выравнивание сетки.
Для распределения пространства (например, вы хотите, чтобы элемент занимал оставшуюся высоту или ширину контейнера), используйте flex-grow.
Для точного определения размера элемента используйте flex-basis, width или height.
Вот еще информация:
