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

Флексбокс горизонтальный

Флексбокс - технология, позволяющая гибко компоновать между собой элементы блока и отдельные блоки, выравнивать их друг относительно друга. Покажем на примере меню несколько вариантов настройки компоновки.

Меню с прижатыми влево пунктами

Меню распределено по строке

Меню с переносом на другую строку

А применимый к контейнеру Флексбокс дает еще больше возможностей для компоновки блоков - в сочетании с их настройками.

На этой картинке вы видите:

  1. горизонтально ориентированный контейнер с логотипом и меню слева, сниппетом поиска и кнопкой формы справа
  2. вертикальный контейнер с заголовком и цитатой
  3. горизонтально ориентированный контейнер с оглавлением раздела (зафиксированной ширины) и контентной областью страницы

Этот сайт включен в демо-версию, вы можете изучить реализацию компоновки изнутри.