Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Вопросы к разделу «Сетки»

Вопросы к разделу «Сетки»

Новые варианты отступов

Свойства margin-inline, margin-block, padding-inline, padding-block идеальны для флексов?

Новые свойства полностью соответствуют margin-[top, right, bottom, left]. И сказать, что они лучше или хуже нельзя.

Минимально возможная ширина

Если ширина флекс-элементов в контейнере задана, то несмотря на это флекс-контейнер все равно будет их ужимать, чтобы уместить их в себя. Но при достижении минимально возможной ширины элементы выйдут за пределы контейнера. Как и кем определяется эту минимально возможная ширина?

Минимальную ширину определяет контент. Формула для определения размеров элемента

content -> width -> flex-basis(ограниче min и max-width)

Если не указано никакой из перечисленных свойств, то самой минимальной шириной будет управлять контент.

Можно ли забыть флоаты и инлайн-блоки?

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

Про них можно забыть, но только для того, чтобы перестать использовать float и display: inline-block для построения сеток. В остальном, эти свойства хорошо выполняют свою работу и изучать/знать их нужно.

Внешние отступы и выравнивание

Если для элемента флексбокса задать и выравнивание (по любой оси), и внешние отступы, то выравнивание перестанет работать. Насколько критично, если в стилях будут указаны оба свойства (например, по ошибке)? Может ли случится так, что если оба свойства заданы, то это станет причиной поломанной сетки в будущем или некорректного понимания браузером (не смотря на то, что маргины в любом случае приоритетнее)?

@ViZuVi, задайте, пожалуйста, вопрос с примером. Я не совсем понял вашу проблему и прям сейчас не понимаю на что отвечать.

Смена блочной модели

На реальных проектах использую box-sizing: content-box? Или все давно перешли на box-sizing: border-box?

Можно ли сразу прописать всем блочным элементам на странице box-sizing: border-box для простоты расчета? Какие проблемы при этом могут возникнуть?

На реальных проектах используют box-sizing: content-box правда очень редко, то есть там где он нужен. Обычно там, где у браузера не получается расположить элементы так как вы хотели. Чаще же используют border-box и вешают это значение для всех элементов. Но делайте это правильно.

*, *::after, *::before {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

Этот пример приспособлен для лёгкого переопределения box-sizing. Если же вы примените border-box ко всем элементам, то переопределять такое будет чуть сложнее.

Гриды и флексы

Можете обьяснить принципиальную разницу Flexbox от CSS Grid?

Flexbox одномерный, а grid двухмерный. Это значит, что во флексе мы не можем расположить элемент на третьей строке второго столбца, а гридах без проблем.

Микросетки и макросетки

Микросетки и макросетки определяются только исходя из своего размера?

Макросетки — расположение больших секционных блоков - header, content, footer, nav. Микросетки — расположение контентных частей - карточки товара, пункты меню, формы.

Краткая запись

Как будет корректнее и почему margin: 0 auto; или margin: auto;?

Корректнее будет

 margin-left: auto;
 margin-right: auto;

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

margin: auto - распределяет равномерно внешние отступы по всем сторонам, margin: 0 auto только слева и справа, сверху и снизу при этом отступы обнуляются.

Схлопывание отступов

Приводит ли схлопывание границ к потери контента?

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.