时间戳

首页 > 解决方案 > Divs 不水平环绕

html - Divs 不水平环绕

问题描述

我有 5 个divs我想使用 3 行和列来对齐，如下所示：

| 哦哦 |
| 哦哦 |
| ○ |

我是 flexbox 的新手，我似乎无法包装我的 div。它们似乎按以下顺序在我的父 div 容器中居中：
  | ○ |
  | ○ |
  | ○ |
  | ○ |
  | ○ |

我希望在innerContainer放置两个 div 后换行到下一行。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 20px;
}

.containerBody {
  padding-top: 20px;
  width: 75%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.innerContainer {
  width: 30%;
  min-width: 30%;
  height: 185px;
  flex: 1;
  box-sizing: border-box;
}
<div class="container">
  <!-- text -->
  <div class="containerBody">
    <!-- text -->
    <a>
      <div class="innerContainer">
        O
      </div>
    </a>
    <a>
      <div class="innerContainer">
        O
      </div>
    </a>
<a>
      <div class="innerContainer">
        O
      </div>
    </a>
<a>
      <div class="innerContainer">
        O
      </div>
    </a>
<a>
      <div class="innerContainer">
        O
      </div>
    </a>

标签： htmlcssflexbox

解决方案

问题flexbox是你想用它控制的项目需要是你的弹性容器的直接子项。像这样：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 1 50%;
}
<div class="container">
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">0</div>
</div>

推荐阅读