Шаблон страницы на основе flex

Flex - добавленное свойство CSS, позволяющее получать страницы, автоматически адаптированные к различным экранам.

Это значение атрибута отображения. Поэтому CSS просто добавил дополнительное значение к существующему свойству :

• отображение: none: Скрытый элемент
.
• отображение: inherit: Тот же формат, что и контейнер .
• экран: inline: Отображается в результате предыдущего без возврата к строке.
• отображение: блок: элемент помещается на новую строку с атрибутами размера и поля
.
• Отображение: inline-block: Блок, который может быть сопоставлен с предыдущим, если он менее широк, чем контейнер.
• diplay: list-item: В виде строки в списке с чипом
.
• экран: flex: Гибкое отображение содержимого контейнера
.

После выбора значения flex в контейнер можно добавить другие свойства.

• flex-направление: column | row
  Отображение элементов в столбцах или строках (по умолчанию).
• flex-wrap: wrap | nowrap (по умолчанию).
  
  • Wrap заставляет нас выходить на линию, когда элементы переполняются.
  • Nowrap помещает все элементы на одну линию, уменьшая при необходимости их ширину.
• justify-content: center | flex-start (по умолчанию) | flex-end | space-around | space-between
• Центр показывает элементы рядом с центром линии.
• flex-start оправдывает их слева.
• flex-end оправдывает их справа.
• space-around размещает их с регулярным интервалом, проставляя на линии.
• space-between выравнивает содержимое по левому и правому или верхнему и нижнему направлениям, помещая пространство между элементами.

Для содержащихся элементов также добавляются различные свойства. В частности, flex-shrink, который указывает, может ли элемент быть сокращен или нет, чтобы освободить пространство. flex-shrink: 0 означает, что его нельзя уменьшать .

Поэтому мы хотим с помощью этих новых свойств сделать шаблон веб-страницы адаптируемым и использовать минимум CSS-кода.

Для этого нужно разбить страницу на несколько разделов:

1. Fullpage - основной контейнер, два его элемента выровнены по столбцам.
2. Первый элемент, рука, а второй, footer, разделяются переменным пространством в зависимости от содержания страницы. Footer, нижний колонтитул всегда находится внизу окна, даже если страница почти пустая.
3. Main содержит два элемента: Header (заголовок) и middle.
4. Header на установленной высоте, middle переменной высоты.
5. Середина содержит два элемента (значение по умолчанию, поэтому не указано). Они разделяются переменным пространством в зависимости от содержания.
6. Первый элемент, content, имеет переменную ширину и помещается слева. Второй, сайдебар, справа имеет фиксированную ширину.

Это приводит к следующей схеме:

CSS-код сильно упрощен :

<style>
html, body: {
  margin:0;
  padding:0;
}

#fullpage {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

#middle {
  display:flex;
  justify-content:space-between;
}

#header {
  height:100px;
}

#content {
  padding:32px;
}

#sidebar {
  width:200px;
}

#footer {
  min-height:64px;	
  display:flex;
  flex-direction:column;
  justify-content:center;
}
</style>

Из кода демонстрации убрали то, что не используется в распоряжении элементов. Полный код - на демонстрационной странице.

Если вы хотите ограничить максимальную ширину страницы, вы можете добавить эти две строки в свойство # fullpage:

max-width:1280px;
margin:auto;

Попробуйте демонстрацию

Его можно загрузить и использовать в качестве отправной точки для сайта или приложения.

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