如何用flexbox将四列包成两列两列？ [英] How to wrap four columns into two rows of two columns with flexbox?

问题描述

我们正在使用flexbox并尝试以下内容。目标是在移动断点上每个项目有一列，在平板电脑断点上有两列，在桌面断点上有四列。

这个例子只使用了四个项目，但假设我有5或6个项目，那么我只想让这些项目有响应。如果行只有足够的空间来显示每行2个项目，那么我希望每个项目继续移动到它上面的行之下。

这怎么能实现？

  .flex-row {display：flex; @media screen和（min-width：768px）{flex：1; flex-direction：row; justify-content：space-between; }}。flex-col {margin：6px;填充：16px;背景颜色：黑色;显示：flex; justify-content：center; align-items：center; flex：1; flex-direction：列; color：white;}  

 < div class =flex -ROW> < div class =flex-col>在没有跨职能流程改进的情况下自动协商可互操作的门户网站。通过。大幅激励战术最佳实践。< / div> < div class =flex-col>无缝竞争。< / div> < div class =flex-col>独特地优化以用户为中心的思维共享与即插即用信息。无缝优化有影响力的解决方案并启用基础设施。< / div> < div class =flex-col>通过大流行供应链动态扩展用于变化的灵活催化剂。有效地与LT; / DIV> < / div>  

当前结果

解决方案

简单地添加 flex-wrap：wrap 允许元素在没有足够空间的情况下进入下一行，并考虑媒体查询是否要控制何时发生中断：

  .flex-row {display：flex; flex：1; flex-direction：row; flex-wrap：wrap;}。flex-col {margin：6px;填充：16px;背景颜色：红色;显示：flex; justify-content：center; align-items：center; flex：1; flex-direction：列;白颜色; box-sizing：border-box;} @ media（max-width：767px）{.flex-col {flex-basis：calc（50％ -  12px）; }} @ media（max-width：460px）{.flex-col {flex-basis：100％; }  

 < div class =flex-row > < div class =flex-col>在没有跨职能流程改进的情况下自动协商可互操作的门户网站。通过。大幅激励战术最佳实践。< / div> < div class =flex-col>无缝竞争。< / div> < div class =flex-col>独特地优化以用户为中心的思维共享与即插即用信息。无缝优化有影响力的解决方案并启用基础设施。< / div> < div class =flex-col>通过大流行供应链动态扩展用于变化的灵活催化剂。 < / div>< / div>  

We are using flexbox and attempting to the following below. The goal is to have one column per item on mobile breakpoints, two columns on tablet breakpoints, and four columns on desktop breakpoints.

The example uses just four items, but let's say i had 5 or 6 items, then i just wanted the items to be responsive. If the row only has enough space to display 2 items per row, then i would expect each item to continue to move below the row above it.

How can this be achieved?

.flex-row {
  display: flex;
  @media screen and (min-width: 768px) {
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
  }
}

.flex-col {
  margin: 6px;
  padding: 16px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  color: white;
}

 <div class="flex-row">
    <div class="flex-col">Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.</div>
    <div class="flex-col">Seamlessly grow competitive.</div>
    <div class="flex-col">Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.</div>
    <div class="flex-col">Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.</div>
    </div>

Current results

Expected results on tablet

解决方案

Simply add flex-wrap:wrap to allow element to go to the next line if there is no enough space and consider media query if you want to control when the break will happen:

.flex-row {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-col {
  margin: 6px;
  padding: 16px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  color: white;
  box-sizing:border-box;
}

@media (max-width:767px) {
  .flex-col {
    flex-basis: calc(50% - 12px);
  }
}

@media (max-width:460px) {
  .flex-col {
    flex-basis: 100%;
  }
}

<div class="flex-row">
  <div class="flex-col">Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.</div>
  <div class="flex-col">Seamlessly grow competitive.</div>
  <div class="flex-col">Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.</div>
  <div class="flex-col">Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.</div>
</div>

这篇关于如何用flexbox将四列包成两列两列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！