html - это - inline-flex vs flex




Как заставить flexbox включать отступы в расчеты? (2)

Ниже два ряда.

  • Первый ряд состоит из двух элементов в flex 1 и один в flex 2 .

  • Вторая строка - это два элемента в flex 1 .

Согласно спецификации 1A + 1B = 2A

Но когда в расчет включено заполнение, сумма неверна, как вы можете видеть в примере ниже.

ВОПРОС

Как заставить flex box включать в свой расчет отступы, чтобы поля в примере выстроились правильно?

.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>


Как заставить flexbox включать отступы в расчеты?

В вашем коде отступы включены в расчеты.

Согласно спецификации 1A + 1B = 2A

Я не верю, что это правильно. Возможно, предоставьте ссылку на ссылку для объяснения.

Свойство flex-grow

Когда вы применяете flex: 1 к элементу, вы используете сокращенное свойство flex чтобы сказать это:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

flex-grow указывает элементу flex использовать свободное пространство в контейнере.

Вот ваш код:

.Item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

В первом ряду padding-right: 10px применяется к трем элементам flex.

Во втором ряду padding-right: 10px применяется к двум элементам flex.

Следовательно, в первом ряду свободного места на 10px меньше для распределения. Это нарушает выравнивание сетки.

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

Для точного определения размера гибкого элемента используйте flex-basis , width или height .

Вот еще немного информации:

  • Flex-Grow не оценивает гибкие элементы, как ожидается
  • Как именно flex-grow работает с flexbox?

Вы можете использовать плавающие элементы псевдоблока вместо заполнения, например: (в этом случае 30px правое заполнение)

.Item:after {
  content: '';
  display: block;
  float: right;
  width: 30px;
  height: 100%;
}





flexbox