响应式flexbox布局的换行问题

Question

响应式flexbox布局的换行问题

3

我在下面的代码中有两种不同的布局。我的问题是，我无法在不更改标记的情况下复制这些布局。我想知道是否有一种花哨的flexbox方法可以完全实现这一点，同时只使用一个html方案。注意：容器将需要具有动态高度。解决方案不一定要使用flexbox，只要达到所需的布局即可。

main {
  width: 750px;
  max-width: 100%;
  margin: auto;
  border: solid 1px black;
  display: flex;
  flex-wrap: wrap;
}



.a {
  background: red;
  width: 40%;
}
.b {
  background: blue;
  width: 60%;
}
.c {
  background: green;
}


.a-mobile {
  background: red;
  width: 40%;
}
.b-mobile {
  background: blue;
  width: 60%;
}
.c-mobile {
  background: green;
  width: 100%;
}

<h2>Desktop</h2>
<main>
  <div class="a">a</div>
  <div class="b">b
   <div class="c">c</div>
  </div>
</main>

<h2>Mobile</h2>
<main>
  <div class="a-mobile">a-mobile</div>
  <div class="b-mobile">b-mobile</div>
  <div class="c-mobile">c-mobile</div>
</main>

- anthony-dandrea

答案是肯定的，如果你可以在容器上设置一个高度。这里有这个选项吗？ - Michael Benjamin

使用浮动和弹性盒子，无需设置高度即可实现此功能。 - tao

@Michael_B 很遗憾，容器需要动态高度。 - anthony-dandrea

1

那么，如果不改变标记，目前无法使用纯 Flex 解决方案。 - Michael Benjamin

更改标记的问题在哪里？ - ptts

显示剩余2条评论

3个回答

1

这是我在评论中描述的float-flexbox方法。虽然我不是特别喜欢它，但它确实可以完全满足您的要求。

它有些hacky，从我的角度来看，与Bootstrap 3的.clearfix :: before | after hack属于同一类别 - {display：table; content：“ ”; } - 这是一个实际的布局问题的实用解决方案，可用于更好，更干净的解决方案具有更好的浏览器支持并使此解决方案过时。

main {
  width: 750px;
  max-width: 100%;
  margin: auto;
  border: solid 1px black;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  color: white;
}
.a {
  background: red;
  flex-basis: 40%;
}
.b {
  background: blue;
  flex-basis: 60%;
}
.c {
  background: green;
  flex-basis: 100%;
}

@media (min-width: 800px) {
  main {
    display: block;
    overflow: hidden;
  }
  .a {
    float: left;
    min-width: 40%;
  }
  .b,.c {
    padding-left: 40%;
  }
  .a,.c {
    padding-bottom: 32768px;
    margin-bottom: -32768px;
    }
}

<main>
<div class="a">a<br />a<br />a<br/>a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</main>
<main>
<div class="a">a</div>
  <div class="b">b<br />b<br />b<br/>b</div>
  <div class="c">c</div>
</main>
<main>
<div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c<br />c<br />c<br/>c</div>
</main>

- tao

1

这太棒了！有点小技巧，但并不像我预期的那么糟糕。感谢您的撰写。 - anthony-dandrea

0

另一种解决方案，它不依赖于 flex box，并且不需要固定高度。Flexbox 在调整二维布局方面表现不佳！

html {
  height: 100%;
}

body {
  height: 100%;
}

main {
  width: 750px;
  max-width: 100%;
  margin: auto;
  border: solid 1px black;
  height: 100%;
}

.a {
  background: red;
  width: 40%;
  height: 100%;
  float: left;
}

.b {
  background: blue;
  width: 60%;
  height: 50%;
  float: left;
}

.c {
  background: green;
  width: 60%;
  height: 50%;
  float: left;
}

@media (max-width: 800px) {
   .a {
    width: 40%;
     height: 50%;
  }

  .c {
    width: 100%;
  } 
}

<h2>Desktop and Mobile</h2>
<main>
  <div class="a">a</div>
  <div class="b">b</div>
   <div class="c">c</div>
</main>

- poushy

看起来这确实依赖于一个固定的高度。这个例子会根据body的高度自适应，而body的高度是100%。如果没有它，就会出现问题。 - anthony-dandrea

1

啊...你说得对...我没有那样想过。我会尝试一下，看看能否想出更好的解决方案！ - poushy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

"display:grid将对这种布局很有用：

但是这个特性（2020年）仍处于实验阶段，只能在少数浏览器中进行测试，也可以参考http://caniuse.com/#search=grid

其中之一的教程https://css-tricks.com/snippets/css/complete-guide-grid/

"

main {
  display: grid;
  grid-template-columns: 30% auto;
}
.a {
  background: red;
  grid-row-end: span 2
}
.b,
.c {
  background: green;
}
.c {
  background: lightblue
}
@media screen and (max-width: 700px) {/* value setted for the demo */
  .a {
    grid-row-end: span 1/* reset optionnal in this very case */
  }
  .c {
    grid-column-end: span 2
  }
}

<main>
  <div class="a"> break point set at 700px for demo</div>
  <div class="b"> i don't move much myself :)</div>
  <div class="c"> see in full page to see me aside the red box and below the green one</div>
</main>

在 CodePen 上玩耍的代码