Свойства 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 только слева и справа, сверху и снизу при этом отступы обнуляются.
Приводит ли схлопывание границ к потери контента?
Не приводит, ведь отступ внешний. Контент находится в своем блоке и его эти войны за отступы не интересуют.