Блог

Как следует из названия, когда я добавляю display: flex в CSS нижнего колонтитула моего приложения, внизу страницы появляется дополнительный пробел, и прокрутка включена. Похоже, это вызвано промежутком в нижнем колонтитуле, который имеет запас в 1rem. Диапазон не вызывает проблем, когда отображение не является гибким, поэтому flexbox просто интерпретирует поля по-другому? И как мне предотвратить появление дополнительного пространства?

Кроме того, я ожидал, что пробел будет связан с корневым разделением React, потому что там находится нижний колонтитул, но при проверке кажется, что он прикреплен к телу страницы, как можно видеть здесь . Почему это?

Несмотря на поиск в Google, я не мог понять, почему это происходит, поэтому извините, если это супер простое исправление, и я просто пропустил ответ!

Вот фрагменты моего кода нижнего колонтитула:

HTML

 
<div className="Palette">
  <Navbar level={level} changeLevel={this.changeLevel} handleChange={this.changeFormat}/>
  <div className="Palette-colours">
    {colourBoxes}
  </div>
  <footer className='Palette-footer'>
    {paletteName}
    <span className='emoji'>{emoji}</span>
  </footer>
</div>

  

CSS

 
.Palette {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.Palette-footer {
  background: white;
  height: 5vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
}

.emoji {
  font-size: 1.5rem;
  margin: 1rem;
}

  

Спасибо за вашу помощь 🙂

По умолчанию span это встроенный элемент, и margin то, что вы к нему применили, фактически не отображается.

Как только вы сделаете его родительским элементом flexbox, он span становится элементом уровня блока и margin применяется в этот момент.