Question

我已经进行了一次求职面试的技术测试，而我在为应该是简单的布局而苦苦挣扎！

我需要两列设计，其中按div依次按以下顺序堆叠：

随后将在较小的屏幕上更改为：

我以为我对flexbox非常了解，但事实证明我显然不知道，我能得到的最接近的（不是……）。

使用

 <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>

我已经搜索了几个小时，无法找到任何东西！谁能指出我正确的方向？

Answer 1

您可以使用浮点数，在较大的屏幕上，将大.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>

Answer 2

您可以使用flexbox order property重新排列移动视图中的项目。对于桌面视图，请查看CSS media queries，以针对不同的视口使用不同的样式。

.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>

使用CSS Flexbox构建堆叠布局

2 个答案: