Flexbox examples - адаптивная страница

Flexbox макет адаптивной страницы

При изменении размера меняется страница
Desktop – ширина от 800px
Tablet – от 799 до 600px
Mobile – менее 599px

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="template-01.css">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <header class="header">Header</header>
    <article class="main">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

CSS
/* Mobile First */
/* 
* Элементы в столбик
* header
* main
* aside-1
* aside-2
* footer
*/
.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center; 
}
/* 
* Для всех дочерних элементов класса .wrapper 
*/
.wrapper > * {
  padding: 10px;
  /* flex: 1 100%; */
  /* размер относительно других элементов */
  flex-grow: 1; 
  /* вся доступная ширина */
  flex-basis: 100%; 
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

Mobile First
Страница состоит из элементов – header, main, aside-1, aside-2, footer
Без медиа запросов получается 3й вариант представления страницы – все элементы выстраиваются в столбик
поскольку каждому элементу присвоено flex-basis: 100%; не смотря на то что контейнер .wrapper имеет свойство flex-flow: row wrap;

Tablet
ширина 600-799px
добавляем сайдбарам flex-basis: 0;
так как у остальных элементов flex-basis: 100%; и у всех flex-grow: 1; и у контейнера flex-flow: row wrap;
сайдбары займут отдельную строчку и разделят ее пополам – flex-grow: 1;

@media all and (min-width: 600px) {
  .aside {
    flex-basis: 0;
  }
}

Desktop
ширина 800px и более
меняется порядок элементов внутри контейнера aside-1 – order: 1;, main – order: 2;
.main { flex: 3 0px; }
– обнуляется flex-basis: 100%; элемента main (второе значение flex: 3 0px; ), соответственно в одной строке окажутся 3 элемента aside-1, main, aside-2
– ширина элемента main в строке в 3 раза больше соседних элементов (aside-1 и aside-2)

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

вот отсюда – https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (во вкладке Examples)

Поделиться с друзьями