Какой браузер подходит для css3 flex-box?

Question

После экспериментов с портированием css3 flex-box, я быстро заметил некоторые различия в Chrome и Firefox.

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

Chrome будет полностью соответствовать стилю,

Пример:

<div id="box">
  <div class="flex-box">Test</div>
  <div class="flex-box">Test Text</div>
</div>

Если 2 блока внутри поля имеют одинаковую назначенную ширину, Chrome сделает их одинакового размера.Firefox примет во внимание, что второму div нужно больше места, и, таким образом, он выделяется больше.

кто прав?

Answer 1

Помните, что гибкость не применяется к ширине, она применяется к свободному пространству после определения минимальной внутренней ширины. Это приводит к противоречивым результатам в нескольких распространенных случаях, , как указано в списке рассылки www-style . Я обнаружил, что если вы не хотите, чтобы CSS переупорядочивался или был многострочным (что еще не реализовано в Firefox и Chrome), то, что вы думаете, вы хотите использовать display: box и box-flex для того, что вы действительно хотите использовать display: table и display: table-cell.

Но вернемся к вашему актуальному вопросу: я обнаружил, что Firefox и Chrome отображаются одинаково, если вы устанавливали ширину в пикселях , но не если вы устанавливали ширину в процентах . Что касается того, какой браузер делает это правильно в данный момент, то справедливо предположить, что Firefox реализует то, что изначально задумывалось в спецификации, поскольку первоначальная спецификация описывает, что делает свойство XUL, и на этом все основано свойство XUL. Как уже упоминали другие, неизвестно, соответствует ли окончательная спецификация исходному замыслу.

Answer 2

Я не согласен с утверждением Роберта «Но вернемся к вашему актуальному вопросу: я обнаружил, что Firefox и Chrome отображаются одинаково, если вы устанавливаете ширину в пикселях, а не если вы задаете ширину в процентах».

IВ настоящее время я использую flexbox, чтобы показать, как просто преобразовать довольно тяжелый сайт JS и CSS в очень простой сайт HTML / CSS3.После того, как я пришел к выводу о настройке ширины в пикселях:

#main {
  display: box;
}

#main > section {
  width: 120px;
  padding: 10px;
  border: 5px solid #000;
}

В Chrome общая ширина = 120 + 20 + 10 = 150px. В ff общая ширина = 120px (отступы 20px находятся внутри.граница 120 и 10px также)

Еще одно несоответствие, которое я обнаружил в chrome, #main является жадным и занимает 100%, как вы, вероятно, ожидаете.В Firefox вам нужно установить 100% на #main, чтобы он работал так, как вы ожидаете.

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

Еще одна вещь, использование CSS-переходов для изменения размеров хорошо работает с явно определенными измерениями (т.е..пикселей) ... но если размерность определяется изгибом блока, анимация просто переходит между значениями изгиба ... не так близко, как сглаживание (хотя вместо изгиба сгибания 5 и 1 вы могли бы иметь изгиб500 и 100).На самом деле, хром не будет анимировать между значениями изгиба, просто скачки.FF, с другой стороны, делает это хорошо.

Я просто очень надеюсь, что дела пойдут так, как FF обрабатывает flexbox, хотя Chrome близок, я просто не согласен с тем, как обрабатываются некоторые вещи, иотсутствие анимации между значениями flex просто отстой.

Answer 3

Я не думаю, что какой-либо браузер является правильным или неправильным, так как flexbox все еще находится в рабочем состоянии. В любое время спецификация может измениться и сделать другой браузер правильным или неправильным.

http://www.w3.org/TR/css3-flexbox/