时间戳

首页 > 解决方案 > flexbox不包装项目

css - flexbox不包装项目

问题描述

我对 flexbox 真的很陌生，我试图理解为什么当浏览器窗口宽度变小时我的 flexbox 不会换行。该行永远不会变成一列。这是为什么？我很感激任何帮助？

堆栈闪电战

.listingBody {
  min-height: 100vh;
}

.listingCard {
  width: 800px;
  height: 400px;
  border-width: 2px;
  border-style: solid;
  display: flex;
  flex-flow: row wrap;
  border-radius: 25px;
  background: white;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  box-shadow: 10px 10px 5px -2px #888;
}

.image {
  width: 200px;
  height: 200px;
  background-color: red;
}

.rules {
  width: 200px;
  height: 200px;
  background-color: green;
}

.info {
  width: 200px;
  height: 200px;
  background-color: blue;
}
<div class="listingBody">
  <div class="listingCard">
    <div class="image">
      test
    </div>
    <div class="info">
      test
    </div>
    <div class="rules">
      test
    </div>
  </div>
</div>

标签： cssflexbox

解决方案

它不会换行，因为您为父 div 设置了固定宽度。您可以只使用max-width或完全删除它。

.listingBody {
  min-height: 100vh;
}

.listingCard {
  height: 400px;
  border-width: 2px;
  border-style: solid;
  display: flex;
  flex-flow: row wrap;
  border-radius: 25px;
  background: white;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  box-shadow: 10px 10px 5px -2px #888;
}

.image {
  width: 200px;
  height: 200px;
  background-color: red;
}

.rules {
  width: 200px;
  height: 200px;
  background-color: green;
}

.info {
  width: 200px;
  height: 200px;
  background-color: blue;
}
<div class="listingBody">
  <div class="listingCard">
    <div class="image">
      test
    </div>
    <div class="info">
      test
    </div>
    <div class="rules">
      test
    </div>
  </div>
</div>

推荐阅读