Комментарии 33
Сколько бы раз я не читал следующий параграф, я остался неспособным его понять…
Размер содержимого определяется минимальным размером содержимого по основной оси, сжатому, если у него есть соотношение сторон любыми заданными свойствами минимального и максимального размера кросс оси, преобразованными соотношением сторон,
и затем еще сильнее сжатым через свойство максимального основного размера, если оно определено.
Оригинальный вариант
The content size is the min-content size in the main axis, clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite.
Размер содержимого — это минимальный размер содержимого на основной оси, зажатый, если он имеет соотношение сторон, с помощью любых определенных минимальных и максимальных свойств кросс-размера, преобразованных через соотношение сторон, а затем дополнительно зажатых с помощью свойства максимального основного размера, если это определено.
Так лучше?
Да, поправил, спасибо.
Мне показалось, или вы пытаетесь переводить названия свойств CSS? cross — это из CSS, это размер по другой оси. Тут не надо пытаться перевести красиво, тут надо понять, о каких свойствах шла речь, и привести ссылки на них. Или пояснить. Иначе и оригинал, и перевод будут одинаково непонятны.
Ну т.е., если у вас есть ограничение размера по высоте, и указан аспект ratio (пропорция x/y), то ограничение размера по высоте будет влиять на ширину, так как описано — т.е. сначала применяются ограничения по другой оси, с учетом пропорции, а потом ограничения по оси основной.
Ну т.е., если у вас есть ограничение размера по высоте, и указан аспект ratio (пропорция x/y), то ограничение размера по высоте будет влиять на ширину, так как описано — т.е. сначала применяются ограничения по другой оси, с учетом пропорции, а потом ограничения по оси основной.
Слово "зажатый" режет слух. Почему не "сжатый"?
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, полезная статья, добавил в закладки. Правда все еще как-то с опаской к флексбоксу отношусь в плане его поддержки браузерами. Судя по результатам https://caniuse.com/#search=flex у флексбокса есть 8 проблем в браузерах Safari 10, Firefox 51, IE 10, IE 11. Понятно, что доля этих браузеров сейчас очень мала, но все же я думаю пока рано скидывать со счетов тот же IE 11.
Правда недавно я обнаружил что борюсь с ним
Абсолютно те же впечатления. С одной стороны, флексбокс конечно же дал много возможностей, о которых раньше не мечтали. С другой, во многих случаях он работает не вполне однозначно и предсказуемо. Он вернул в верстку элемент борьбы и шаманства. Как было 10 лет назад — сверстал и полез смотреть в разные браузеры, где что уползло. А уже позднее флоаты были хоть и скудным, но абсолютно надежным средством — как задумал, так и работает. И вот флекс решил это исправить.
В основном шаманство с флексами возникает от непонимания флексов. Они действительно не такие простые, как пишут во всяких "полных руководствах по флексбокс" (например, там обычно не пишут всего того, что в этой статье). Есть конечно и баги в разных браузерах, но их не так много, с этим можно жить. Поэтому, думаю некорректно сравнивать флексы с тем что было раньше.
А почему бы и не сравнивать? Лично я считаю, что флексы недопродуманы именно на уровне спецификации (баги в браузерах тоже есть, но это вторично). Базовая идея вроде и хороша, но в реальной практике всплывает много шероховатостей. Причем как тонких нюансов, так и вполне себе лежащих на поверхности. Использую в продакшене флексы около года наверное, вроде бы достаточно, чтобы прочувствовать.
Я помню, как Вадим Макеев говорил, что «это первая система раскладки, которая не хак». Задумывалась именно так. По факту хаками всё равно попахивает :)
Возлагаю большие надежды на гриды, но думаю, что до реально широкого прода они доползут только года через джва. А до того мы будет наблюдать борьбу консерваторов и полифилеров.
Я помню, как Вадим Макеев говорил, что «это первая система раскладки, которая не хак». Задумывалась именно так. По факту хаками всё равно попахивает :)
Возлагаю большие надежды на гриды, но думаю, что до реально широкого прода они доползут только года через джва. А до того мы будет наблюдать борьбу консерваторов и полифилеров.
НЛО прилетело и опубликовало эту надпись здесь
+100500 в карму.
«В следующей секции»
В оригинале: «In the next section». Небольшая поправка: «section» переводится как «параграф», «раздел», если речь идет о книге, статье (или «колонка», «рубрика» — если о газете и т. д.)
Когда речь идёт о вебе, чтение стандартов вызывает несварение…
Про перевод. Очень всегда корежит от обращения к читателю на «ты». Тем более тут перевод с английского.
Спасибо, статья была полезная для меня))
Спасибо, но посижу пока на bootstrap.
Я думал, что если, например, ты хочешь заголовок с логотипом и названием сайта слева, а кнопкой логина справа…
… тебе следует дать названию flex: 1, чтобы прижать остальные элементы к другому концу строки.
а не проще ли использовать justify-content: space-between?
… тебе следует дать названию flex: 1, чтобы прижать остальные элементы к другому концу строки.
а не проще ли использовать justify-content: space-between?
В примере номер 2, сказано, про min-width:0, но и появился word-wrap: break-word; Как же себя поведет блок, если не было бы word-wrap: break-word;???
Повествование в стиле серии книг Head First
Еще баг от IE11: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12276466/
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
11 вещей которые я узнал, читая спецификацию flexbox