Дисплей: flex; vs calc(); представление

Сегодня я пришел в дискуссию, где мне интересно, какой самый эффективный способ иметь двух div рядом друг с другом.

С одной стороны, мне нравится использовать display:flex;, с другой стороны есть возможность использовать calc(), причина в том, что наш div имеет отступы, и нам нужно уменьшить ширину с помощью дополнения. Корпус:

<div class='container'>
 <div class='inner'></div>
 <div class='inner'></div>
</div>

Оба должны быть на 50% ширины. По умолчанию css:

* {
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.container {
 height: 100%;
 width: 100%;
}
.inner {
 width: 50%;
 padding: 20px;
}

Способ display:flex; будет дополнительным:

.container {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 align-content: stretch;
}

calc():

.inner {
 width: calc(100% - 40px);
 display: inline-block;
}

или

.inner {
 width: calc(100% - 40px);
 float: left;
}

Мне не нужна таблица в моем CSS. Кроме того, нам не нужно заботиться о версиях браузера, это должно быть функциональным только в последних версиях.

Что было бы рекомендовано использовать? Что больше производительности?

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

Ответы

Ответ 1

Я провел простой тест из любопытства и, похоже, не было никаких различий в производительности между float + calc vs flex, за исключением IE, который намного медленнее, чем FF и Chrome.

Из связанная статья:

Новый flexbox код имеет намного меньше многопроходных кодовых файлов. Вы все еще могут легко удалять многопроходные кодеки (например, flex-align: растяжка часто 2-х прохода). В общем, это должно быть много быстрее в общем случае, но вы можете построить случай, когда его одинаково медленно.

Тем не менее, если вам это удастся, регулярный макет блока (non-float), обычно будет таким же быстрым или быстрым, чем новый flexbox, поскольку его всегда один проход. Но новый flexbox должен быть быстрее, чем использовать таблиц или написания собственного кода компоновки JS-base.

Я уверен, что calc() делает компоновку блока также несколько проходов:)

LE: была ошибка в Firefox, которая делала переполнения очень медленными, когда у вас было 4-5 вложенных flexboxes, но оно было исправлено в последние версии (37 +).