, крах, разрушающийся в Flexbox

в CSS, поля на соседних элементах обычно рушатся, чтобы создать единый край. Однако в контейнерах Flexbox это поведение различено. маржинальный бат: 20px; } основной { маржинальный бат: 20px; }

, однако, в контейнере Flexbox: #intainer { дисплей: Flex; Флекс направление: колонка; } статья { маржинальный бат: 20px; } основной { маржинальный бат: 20px; }

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

понимание различия

#container {
  display: flex;
  flex-direction: column;
}

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

в форматировании форматирования. Однако контейнеры Flexbox создают другой тип контекста, называемый контекстом форматирования Flex. Маржи не разрушаются, потому что содержимое обрабатывается по -разному рисковать нормальная компоновка блоков. Поплавки не вторгаются в контейнер с гибкой, а поля контейнера остается отдельной от поля его дочерних элементов.

]