Создание макета стека с помощью CSS Flexbox - PullRequest
Новая
       24

Создание макета стека с помощью CSS Flexbox

0 голосов
/ 01 ноября 2018

У меня есть технический тест для собеседования, и я борюсь с тем, что должно быть простым макетом!

Мне нужен дизайн с двумя столбцами, где элементы делятся друг на друга согласно:

desired Layout

, который затем изменится для небольших экранов на:

enter image description here

Мне показалось, что я достаточно хорошо знаю flexbox, но, оказывается, я не знаю, самое близкое, что я могу получить (чего нет рядом ...), это

enter image description here

с использованием 

 <head>
  <style>
  .container{
    width:600px;
    min-height:300px;
    background-color: blue;
    display:flex;
    flex-wrap: wrap;
  }
  .small{
    width: 100px;
    height:100px;
    background-color: darkgoldenrod;
    margin:20px;
  }
  .big{
    width: 250px;
    height:250px;
    background-color: green;
    margin:20px;
  }
  </style>
</head>
<body>
<div class="container">
    <div class="big">Widget 1</div>
    <div class="small">Widget 2</div>
    <div class="small">Widget 3</div>
    <div class="big">Widget 4</div>
    <div class="small">Widget 5</div>
    <div class="small">Widget </div>
</div>
</body>

Я искал несколько часов и не могу ничего подобрать! Кто-нибудь может указать мне правильное направление?

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Можно использовать свойство заказа flexbox , чтобы переупорядочить элементы в мобильном представлении. Для представления рабочего стола посмотрите медиазапросы CSS , чтобы иметь разные стили для разных областей просмотра. 

.grid-container {
  background: blue;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.widget {
  width: 100px;
  height:100px;
  margin: 10px;
  background-color: darkgoldenrod;
}

.green {
  background-color: green;
}

.item1 {
  order: 1;
}

.item2 {
  order: 2;
}

.item3 {
  order: 4;
}

.item4 {
  order: 3;
}

.item5 {
  order: 5;
}

.item6 {
  order: 6;
}
<div class="grid-container">
  <div class="widget item1 green">1</div>
  <div class="widget item2">2</div>
  <div class="widget item3">3</div>
  <div class="widget item4 green">4</div>
  <div class="widget item5">5</div>
  <div class="widget item6">6</div>
</div>
0 голосов
/ 01 ноября 2018

Вы можете просто использовать float, перемещая большие элементы .widget влево и меньшие элементы .widgets справа от элемента .container на больших экранах: 

/*IGNORE STYLE RULES BETWEEN HERE...*/

body {
  margin: 0;
}

.container {
  background: blue;
  box-sizing: border-box;
  counter-reset: widget;
  margin: auto;
  max-width: 600px;
  padding: 20px;
}

.widget::after {
  color: white;
  content: "widget-" counter(widget);
  counter-increment: widget;
  font-family: monospace;
}


/*...AND HERE*/

.container {
  overflow: auto;
  /*Stops container height from collapsing*/
}

.widget {
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 250px;
}

.widget--small {
  background: orange;
  height: 100px;
}

@media screen and (min-width: 390px) {
  .widget--small {
    float: right;
    clear: right;
    width: 100px;
  }
  .widget--small:nth-child(5) {
    margin-top: -30px;
    /*offsets the extra spacing between elements*/
  }
}

.widget--big {
  background: green;
  height: 250px;
  width: 250px;
}

@media screen and (min-width: 390px) {
  .widget--big {
    float: left;
    clear: left;
  }
}
<div class="container">
  <div class="widget widget--big"></div>
  <div class="widget widget--small"></div>
  <div class="widget widget--small "></div>
  <div class="widget widget--big"></div>
  <div class="widget widget--small"></div>
  <div class="widget widget--small"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...