В чем разница между гибкостью и высотой?

Question

Учитывая следующий пример, оба заполнят центр, чтобы занять оставшееся место на странице, учитывая, что страница использует flex. Я склоняюсь к использованию свойства css flex против height в теле. Есть ли разница, которую необходимо учитывать при применении одного над другим?

CSS

.page {
  display: flex;
  flex-direction: column;
}

.header {
  height: 100px;
}

.body {
  flex: 1; // vs height: 100%;
}

.footer {
  height: 40px;
}

HTML

<div class="page">
   <div class="header">Sample Header</div>
   <div class="body">Sample Body</div>
   <div class="footer">Sample Footer</div>
</div>

Answer 1

Попробуйте код ниже

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  height: 100px;
   display: flex;
  align-items: center;
  justify-content: center;
}

.body {
    display: flex;
  flex-direction:  column;
    height: 80vh;    
      align-items: center;
  justify-content: center;  

}

.footer {
  height: 40px;
    display: flex;
     align-items: center;
  justify-content: center;
}

<div class="page">
   <div class="header">Sample Header</div>
   <div class="body">Sample Body</div>
   <div class="footer">Sample Footer</div>
</div>

Answer 2

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

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

В контейнере в направлении столбца (как у вас) вышеприведенные свойства flex применяются вертикально. Это означает, что flex-basis и height являются эквивалентными свойствами.

flex-basis = height (in a column-direction container)

Существует очевидная разница между flex-basis: 0 и height: 100%. Это такая же разница как height: 0 и height: 100%.

В вашей ситуации, когда .header и .footer занимают 140px вертикального пространства, установка среднего элемента (.body) на height: 100% обычно вызывает переполнение.

Но поскольку начальное значение flex-контейнера равно flex-shrink: 1, flex-элементам разрешается сокращаться, и этого не произойдет. Однако, на мой взгляд, это все еще неаккуратное и неточное кодирование.

Установив .body на flex: 1, вы устанавливаете высоту на 0, но также позволяете ей использовать свободную высоту с flex-grow: 1. В этом случае я бы сказал, что это решение более эффективно.

---

Подробнее:

• В чем разница между flex-основе и шириной?
• & секта; 7.1.1. Основные значения flex

Answer 3

Существует огромная разница между изгибом и высотой.

Сначала ответьте на ваш вопрос.

1. Высота 100% не использует оставшееся пространство. Он будет использовать все пробелы родителя, в вашем случае, если dom страницы равен height 200px;, то body также будет height: 200px;.

2. Flex будет правильным решением для заполнения пространства (flex: 1).

   Flex - это больше, чем заполнение пространства, это больше макет, и он влияет на своих дочерних элементов, их расположение и выравнивание.