1

При объявлении типа документа таблица стилей начинает работать некорректно.

1 изображение - ожидаемый результат (без объявления типа документа).

2 изображение - получаемый неправильный результат (с объявлением типа документа)

то, как надо то, как получается при объявлении типа документа

.flex-container {
  display: flex;
  height: 83.33333%;
  flex-flow: column wrap;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}

.flex-container2 {
  display: flex;
  height: 16.66666%;
  flex-flow: column wrap;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}

.flex-item {
  height: 100px;
  width: 100px;
  font-family: "Tahoma";
  font-size: 40px;
  text-align: center;
  border-top: solid 1px #687291;
}

.color1 {
  background-color: #dfe1e7;
}

.color2 {
  background-color: #eeeff2;
}

.last-item {
  height: 100px;
  width: 100px;
  font-family: "Tahoma";
  font-size: 40px;
  text-align: center;
  border: solid 4px black;
  background-color: #687291;
}
<div class="flex-container">
  <div class="flex-item color1">A</div>
  <div class="flex-item color2">B</div>
  <div class="flex-item color1">C</div>
  <div class="flex-item color2">D</div>
  <div class="flex-item color1">E</div>
</div>
<div class="flex-container2">
  <div class="last-item">F</div>
</div>

6
  • 1
    Не понял связи, но для родительских html и body тоже поставьте какую-нибудь высоту (100% например)
    – andreymal
    31 мая 2018 в 20:47
  • @andreymal помогло.) только теперь полоса прокрутки появилась почему-то, несмотря на height: 100%; 31 мая 2018 в 20:57
  • 1
    Добавь к этому свойству еще одно, margin: 0; (:
    – Sjeurt
    31 мая 2018 в 21:03
  • А все равно поедет при уменьшении окна... если вам тяжело набрать <!DOCTYPE html> скопируйте=)) 31 мая 2018 в 21:06
  • 2
    Если интересно почему так происходит: объявление doctype html изменяет режим отображения с quirks mode, на standard mode. Так вот, в quirks mode элементы html и body были по умолчания равны 100% вьюпорта, а в стандартном режиме они по умолчанию равны 100% размера дочерних элементов.
    – Sjeurt
    31 мая 2018 в 21:12

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.