使用 CSS Flexbox 构建堆叠布局答案

【问题标题】：Building a stacking layout with CSS Flexbox使用 CSS Flexbox 构建堆叠布局
【发布时间】：2018-11-01 21:40:58
【问题描述】：

我有一个工作面试的技术测试，我正在为应该是一个简单的布局而苦恼！

我需要一个两列设计，其中按 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>

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

【问题讨论】：

示例图形看起来像是在使用浮动而不是弹性框，tbh。无论如何，媒体查询会被视为作弊吗？
是否必须使用 flexbox？还是也允许网格？
如果没有额外的包装器和display:contents，flexbox 中的多个布局是不可能的。

标签： css layout flexbox styles

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：