it-swarm.com.ru

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

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

  • Первая строка это два элемента в 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>

23
DreamTeK

Решение:

Установите 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>


Эта проблема:

Расчет выполняется без padding. Так; добавление padding к элементу flex не дает ожидаемой ширины spec .

Конкретная статья

Например, доступное пространство для гибкого элемента в плавающем гибком контейнере автоматического размера:

  • ширина содержащего блока гибкого контейнера минус поле, граница и отступ гибкого контейнера в горизонтальном измерении
  • бесконечен в вертикальном измерении

Почему не рассчитывается отступ? Это то, что спецификация хочет.

Определить доступное пространство main и cross для элементов flex. Для каждого измерения, если это измерение поля содержимого flex container определенного размера, используйте его; если это измерение flex container измеряется в соответствии с ограничением min или max-content, доступным пространством в этом измерении является это ограничение; в противном случае вычтите поле, границу и отступ гибкого контейнера из пространства, доступного для гибкого контейнера в этом измерении, и используйте это значение. Это может привести к бесконечному значению.

Если вы вычтете padding и margin из размера элемента, вы получите:

A1 + A2 = B1

Однако после того, как вы это сделали, к элементу был добавлен отступ. Чем больше элементов, тем больше отступов. Это не рассчитывается по ширине, в результате чего ваше утверждение будет ложным.

23
Randy

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

В вашем коде padding is включен в вычисления.

Согласно спецификации 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 применяется к three flex элементам.

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

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

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

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

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

4
Michael_B

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

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

0
sorioz