Question

我正在尝试使用flexbox创建一个响应式布局，其中需要堆叠一对项目（两个和四个），在大屏幕上的第三个旁边，但是然后在窄屏幕上，订单需要更改所以他们是堆叠的，一，二，三，四。

我有一个解决方案，但它不是DRY，正如你在片段中看到的那样，我已经重复了第四部分。

是否可以使用flexbox实现此目的而不进行复制？

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid red;
}
.section {
  border: 1px solid green;
  flex-grow: 1;
}
.one, .two, .four {
  width: 100%;
}
.sub-container {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
}
.mobile-only {
  display: none;
}
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .sub-container {
    width: 100%;
  }
  .section {
    width: 100%;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

<div class="container">
  <div class="section one">One</div>
  <div class="sub-container">
    <div class="section two">Two</div>
    <div class="section four desktop-only">Four</div>
  </div>
  <div class="section three">Three</div>
  <div class="section four mobile-only">Four</div>
</div>

Answer 1

Flexbox不是为构建二维网格而设计的（其中列和行可以相交）。因此，为了使您的布局能够使用flex属性，您将不得不在那里破解。

以下是对问题的更完整解释：

Is it possible for flex items to align tightly to the items above them?

但是，CSS Grid的布局简单易行。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 5px;
  grid-template-areas: " one one "
                       " two three "
                       " four three ";
}

.one   { grid-area: one; }
.two   { grid-area: two; }
.three { grid-area: three; }
.four  { grid-area: four; }

@media ( max-width: 600px ) {
  .container {
       grid-template-columns: 1fr;
       grid-template-areas: " one "
                            " two "
                            " three"
                            " four ";
       }
}

/* non-essential; just for demo */
.section {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="section one">One</div>
  <div class="section two">Two</div>
  <div class="section three">Three</div>
  <div class="section four">Four</div>
</div>

https://jsfiddle.net/9fyprm3u/

网格规范提供了多种设计网格的方法。在这种情况下，我使用grid-template-areas属性，允许您使用ASCII艺术布局网格项。

browser support

Flexbox行有两列，重新排序用于窄屏幕

1 个答案: