Сергей delphinpro

Просто приведу один пример из текущей работы по верстке:

Лень дизайнера:



Вместо того, чтобы сделать каждую строку отдельным блоком, запилил все в один. Верстальщику лишний гемор, чтобы определить параметры шрифта и отступов.

-----------------

Вот еще.



Казалось бы,обычный заголовок с красной строкой. Заверстаю с помощью text-indent.

А хрен там не валялся. Потому что дальше такое:



Круто смотрится. Наверное. И я даже это заверстаю при желании.

Но ведь эти тексты будут потом заполнятся в админке. Они могут меняться. И скорее всего а админке будет простое однострочное текстовое поле для заголовка. Тут хз как делать кастомные отступы на рандомной строке.

.block {
  width: 100px;
  flex-shrink: 0; /* Запретить сжиматься меньше заданного */
}

Как оттянуть блок с длинным текстом?

Откуда вы только такие формулировки рожаете...

https://yandex.ru/search/?text=meta+viewport

Делаем макет из двух колонок и двух столбиков. Картинку размещаем в первой колонке на две строки. Стили для выравнивания - по вкусу, сами.

.el {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}
.img {
  grid-row: span 2;
}
.time {
  text-align: right;
}

задача со звездочкой *

.el {
  position: relative;
}
.cancel {
  position: absolute;
  right: 0;
  top: 0;
}

вы не дочитали определение, там дальше так:
Согласно MDN блок со значением position: absolute; позиционируется через свойства top:; left:; right:; bottom:; относительно ближайшего родителя со значением свойства position, отличным от static.

Проблема в смешивании флексов и флоатов. Откуда вообще такая идея?
Вот так делается ваша раскладка

В этом же окне доп настройки

Сделайте такую сетку



Картинки разместите с объединением ячеек grid-row: span 2; или указанием конкретных грид-линий.

Популярный вопрос.
Ответ есть у меня:
https://yandex.ru/search/?text=masonry+layout

ali5,

Вобщем верстать нужно много проектов и разных , я так понял.
И чем больше проектов тем лучше, и типа со временем они отложатся в памяти.

Нужно просто знать как работает CSS. А дальше вы просто комбинируете свойства для достижения вашей цели. Ну для базовых каких-то вещей, конечно есть уже готовые принципы/решения/шаблоны. Однако, когда шаблон для верстки хотя бы немного выйдет из "стандартных" рамок, вы попадете в тупик, если будете думать "паттернами".

Вы сделали таблицей. Зачем переопределять отображение на флекс, если поведение таблицы именно такое, как вам нужно?

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

Всё возможно.
Например, так



Поддержка в целом неплохая https://caniuse.com/css-masks
Но если надо более надежно, то css-маску можно поменять на svg-маску

Обычные картинки на фоне.
Фоны могут быть множественными.
Фоны могут позиционироваться.
Плюс медиа-запросы для корректировки.