Модель Flexbox и вертикальной прокрутки в полный рост, используя новые приложения на основе API-интерфейса

Я хочу использовать приложение полной высоты с помощью flexbox. Я нашел то, что хочу, используя старый flexbox (display: box; и другие вещи) в этой ссылке: CSS3 Flexbox full-height app и overflow

это правильное решение для старой версии свойств css flexbox.

Если я хочу попробовать использовать новые свойства flexbox, я попытаюсь использовать второе решение в той же ссылке, но "взлом" flexbox используя контейнер с высотой: 0px; это делает, чтобы показать вертикальная прокрутка.

мне это не очень нравится, потому что это вводит другие проблемы и это больше workarround чем решение.

Я подготовил jsfiddle с базовым примером:http://jsfiddle.net/ch7n6/

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

это "полноразмерный html-веб", а нижний колонтитул находится внизу из-за flexbox элемента содержимого. Я предлагаю вам переместить панель между кодом css и результатом, чтобы имитировать разную высоту.

3 58
html css css3 flexbox html5

3 ответа:

Спасибо https://stackoverflow.com/users/1652962/cimmanon это дало мне ответ.

решение устанавливает высоту для вертикального прокручиваемого элемента. Например:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

элемент будет есть высота, потому что flexbox пересчитывает его, если вы не хотите мин-высота так что вы можете использовать высота: 100px; что это точно так же, как: мин-высота: 100 Пикс;

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

так что лучшее решение, если вы хотите мин-высота в вертикальной прокрутке:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

если вы просто хотите полную вертикальную прокрутку в случае, если нет достаточно места, чтобы увидеть статью:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

окончательный код:http://jsfiddle.net/ch7n6/867/

122

редактор спецификаций Flexbox здесь.

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

  • не используйте префиксы. Без префиксов основе хорошо поддерживается в большинстве браузеров. Всегда начинайте с без префиксов, и только добавить префиксы при необходимости поддержать его.

  • так как ваш верхний и Нижний колонтитулы не предназначены для сгибания, они оба должны иметь flex: none; установить на них. Прямо сейчас у вас есть подобное поведение из-за некоторых перекрывающихся эффектов, но вы не должны полагаться на это, если вы не хотите случайно запутать себя позже. (По умолчанию:flex:0 1 auto, поэтому они начинаются на своей автоматической высоте и могут уменьшаться, но не расти, но они также overflow:visible по умолчанию, который запускает их по умолчанию min-height:auto предотвратить их от сжимать на всех. Если вы когда-нибудь установите overflow на них, поведение min-height:auto изменения (переключение на ноль, а не на минимальное содержание), и они внезапно раздавят экстра-высокие <article> элемент.)

  • вы можете упростить <article>flex тоже - просто набор flex: 1; и вы будете хорошо идти. Попробуйте придерживаться общих значений в https://drafts.csswg.org/css-flexbox/#flex-common если у вас нет веской причины делать что - то более сложное-они легче читаются и охватывают большинство поведений, которые вы хотите вызвать.

43

текущая спецификация говорит об этом в отношении flex: 1 1 auto:

размеры элемента на основании width/height свойства, но делает они полностью гибкие, так что они поглощают любое свободное пространство вдоль основной ось. Если все элементы либо flex: auto,flex: initial или flex: none, любое положительное свободное пространство после того как детали были определены размер будет распределенный равномерно к деталям с flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

мне кажется, что если вы говорите, что элемент имеет высоту 100 пикселей, он больше похож на "предложенный" размер, а не на абсолют. Поскольку ему разрешено сжиматься и расти, он занимает столько места, сколько ему разрешено. Вот почему добавление этой строки в ваш" основной " элемент работает:height: 0 (или любое другое небольшое число).

17