В 1996 году W3C в спецификации CSS предложил модель, в которой ширина элемента — это ширина его content-области. Пограничные случаи этой модели начали сыпаться уже к 2002-му: — дизайнер просит блок шириной 300px с 10px padding и 1px border; — вы пишете width: 300px; padding: 10px; border: 1px solid; — браузер выдаёт блок шириной 322px и ломает макет. Это не баг — это content-box в действии. А border-box — это патч, который выправляет поведение. Давайте разберёмся детально. Что происходит внутри? —...

CSS Flexible Box Layout — это модуль для выравнивания элементов и распределения пространства между ними. В сети полно кратких шпаргалок, помогающих понять, как управлять элементами внутри flex-контейнера. Однако технология полна нюансов, знание которых сэкономит вам время при работе с реальными проектами. Как быть, если первые два элемента внутри flex-контейнера нужно выровнять по левому краю, а последний — сместить к правому? Веб-разработчики, которые не знают, как решить эту задачу за счет установки значения для всего одного свойства, начинают создавать лишние теги HTML...