Воссоздание CSS Grid макета с Flexbox - PullRequest
Новая
       27

Воссоздание CSS Grid макета с Flexbox

0 голосов
/ 10 декабря 2018

Это простой макет, который я создал с помощью CSS Grid для веб-сайта, который отображает события в виде списка.Информационная область содержит дату, и есть еще две области для контента и рекомендуемого изображения.Используя grid-row и order, это можно сделать в несколько строк.

Я пытаюсь улучшить свои навыки с помощью Flexbox и попытался воссоздать тот же макет (с аналогичными настройками макета в зависимости от точки останова).) и не удалось.Если бы кто-то мог указать мне правильное направление или привести аналогичный пример, я был бы очень признателен!

Код здесь: https://codepen.io/mwaterous/pen/OrPmLL

1 Ответ

0 голосов
/ 12 декабря 2018

Я рад, что вы нашли один из способов добиться этого (с помощью реструктурированного HTML).Если по какой-либо причине вы застряли в HTML, который вы не можете изменить, это может быть одним из решений.

Отказ от ответственности: Основная проблема (и действительно вопрос) заключалась в том, какдобиться двухмерного макета (легко достигается с помощью CSS-сетки), если у нас есть 3 дочерних элемента div в одном родительском элементе, и мы должны использовать flexbox.

Самое большое преимущество CSS-сетки перед Flexbox-то, что она позволяет вам манипулировать контентомв 2-х измерениях.Мое решение для достижения этой цели с помощью flexbox нуждалось в «помощи» абсолютного позиционирования, но оно делает свое дело.Я намеренно оставил некоторые части кода закомментированными, чтобы показать вам альтернативы, и я попытался включить некоторые полезные комментарии.К сожалению, фрагмент кода не позволяет использовать код scss, поэтому я включу его в тело вместе с этим: https://codepen.io/nemanjaglumac/pen/OrVgLR

// HTML CODE
<section class="container">
  <div class="cell info">.info</div>
  <div class="cell main">.main</div>
  <div class="cell image">.image</div>
</section>

Один вариант для css. 

// SCSS CODE
// GLOBAL VARIABLES
$main-color: #fff;

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: linear-gradient(-20deg, #00b09b, #96c93d);
  min-height: 100vh;
  font-family: Ubuntu, sans-serif;
  font-size: 18px;
  text-shadow: 1px 1px 0 #000;
  color: $main-color;
  text-align: center;
}

.cell {
  background-color: rgba($main-color, 0.15);
  border: 1px solid $main-color;
  border-radius: 2px;
  padding: 20px;
  margin: 10px;
  text-align: center;

  &:hover {
    background-color: rgba($main-color, 0.25);
  }
}

@media screen and (min-width: 768px) {
  .container {
    display: flex;
    flex-flow: wrap-reverse; // this has saved us 3 lines of code (flex-direction: row [1], flex-wrap: wrap [2], and then later we would have to set order to -1 on .image [3])
    // flex-direction: row; // [1]
    // flex-wrap: wrap; // [2]
    position: relative;
    height: 300px;
  }

  .info {
    width: 180px;
    position: absolute;
    top: 0;
    bottom: 0;
    // left: 0; 
  }

  .main, 
  .image {
    width: calc(100% - 180px - 4*10px); // we need to count all four margins (2elements x left+right)
    margin-left: auto; // this moves elements all the way to the right. Alternative would be to set justify-content of the .container to flex-end, but then we would need to explicitly set .info's left position to 0 to "keep it in place"
  }

  // .image {
  //   order: -1; [3]
  // }
}

@media screen and (min-width: 1021px) {
  .info {
    position: initial;
  }

  .main,
  .image {
    margin: 10px;
  }

  .main {
    flex: 2;
  }

  .image {
    flex: 1;
    // order: 0; [3]
  }
}

Дополнительное чтение:

...