必要时将项目弯曲到两行 [英] Flex items to two rows when necessary

问题描述

严格使用flexbox可能无法做到这一点，或者可能需要某些媒体查询.我很好.我想知道是否有一种方法可以将四个项目水平地排成一行，然后将它们分别切换为两列和两个项目.

This might not be possible to do strictly with flexbox or it may require some media queries. I'm fine with that. I'm wondering if there is a way to have four items arranged horizontally in one row that will responsively switch to two columns both with two items.

我已经尝试了多种方法来做到这一点，例如:

I've tried various things to do this such as:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
button {
  width: 250px;
}

<div class="flex-container">
  <button>a</button>
  <button>b</button>
  <button>c</button>
  <button>d</button>
</div>

这行得通，但是，如果减小屏幕宽度，它将在第一行中包装为三项，在第二行中包装为一项，直到将宽度减小到小于这三项的宽度为止.如果屏幕宽度太小而无法将所有四个项目水平排列，我希望它是两列两行的项目.

This works okay, but if you reduce the screen width it wraps to three items in the first row and one item in the second until you reduce the width to less than the width of the three items. If the screen width gets too small to have all four items arranged horizontally, I'd like it to be two columns and two rows of items.

我可以控制行中每个项目的宽度，但它们的大小会像按钮一样小(最大200像素).

I have some control over the width of each item in the row, but they will be relatively small like buttons (maybe 200px max).

这可能与flexbox有关吗?如果没有，是否有更好的替代方法来包装到适当的网格?

Is this possible to do with flexbox? If not, is there a better alternative to wrapping to an appropriate grid?

推荐答案

一个没有媒体查询的想法是对按钮使用额外的包装，如下所示:

One idea without media query is to use extra wrapper for the button like below:

.flex-container,
.flex-container > div{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

button {
  width: 250px;
}

<div class="flex-container">
  <div>
    <button>a</button>
    <button>b</button>
  </div>
  <div>
    <button>c</button>
    <button>d</button>
  </div>
</div>

这篇关于必要时将项目弯曲到两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！