时间戳

首页 > 解决方案 > Flexbox：对齐内容中心，但在 flex-wrap 上留有空格

html - Flexbox：对齐内容中心，但在 flex-wrap 上留有空格

问题描述

我有这个flexbox课用的css：

.flexbox {
  border: 1px solid red;
  padding: 20px;
  justify-content: center;
  direction: row;
  flex-wrap: wrap;
  display: flex;
  margin-bottom: 50px;
}

.flex-item {
  border: 1px solid blue;
  padding: 30px;
}

.w-300 {
  width: 300px;
}

.w-200 {
  width: 200px;
}
<p>Width is large enough</p>
<div class="flexbox w-300">
  <div class="flex-item">
    Flex Item
  </div>
  <div class="flex-item">
    Flex Item
  </div>
</div>

<p>Width is small</p>
<div class="flexbox w-200">
  <div class="flex-item">
    Flex Item
  </div>
  <div class="flex-item">
    Flex Item
  </div>
</div>

当宽度足够大时，我想将弹性项目居中，但是当宽度很小并且弹性盒被包裹时，我想证明这样的弹性项目space-between：

.flexbox {
  border: 1px solid red;
  padding: 20px;
  justify-content: space-between;
  direction: row;
  flex-wrap: wrap;
  display: flex;
  margin-bottom: 50px;
}

.flex-item {
  border: 1px solid blue;
  padding: 30px;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.w-200 {
  width: 200px;
}
<p>Width is small</p>
<div class="flexbox w-200">
  <div class="flex-item mr-auto">
    Flex Item
  </div>
  <div class="flex-item ml-auto">
    Flex Item
  </div>
</div>

但正如您在第一个片段中看到的那样，当前的 flexbox 正在证明 flex-items center 即使在被包装时也是如此。

我怎样才能修改flexbox类来达到这个结果？

标签： htmlcssflexbox

解决方案

推荐阅读