使用flex居中动态div数答案

【问题标题】：center dynamic number of divs using flex使用flex居中动态div数
【发布时间】：2021-09-15 06:45:21
【问题描述】：

我在一个 div 中有 4 个 div，我希望这些 div 居中。

我正在使用 flexbox 来实现这一点

justify-content: center;
flex-wrap : wrap;

假设第四个 div 将在新行中，它也会居中，但我希望它位于行首。

代码笔：https://codepen.io/loukil98/pen/zYwvPzM?editors=1100

Div 5 居中，但我希望与 div1 处于同一水平。

<html>

<body>
  <div class="mainContainer">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <div class="div3">div3</div>
      <div class="div4">div4</div>
      <div class="div2">div5</div>
 </div>
</body>

</html>

CSS

body{
width:100%;
}
.mainContainer{
  width:90%;
  background-color : brown ;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  align-content:flex-start;
}


.div1{
  width:250px;
  height:100px;
  background-color:blue;
  margin:10px;
}
.div2{
  width:250px;
  height:100px;
  background-color:red;
    margin:10px;

}
.div3{
  width:250px;
  height:100px;
  margin:10px;
  background-color:green;
}
.div4{
   width:250px;
  height:100px;
  background-color:purple;
  margin:10px;
}

【问题讨论】：

这可能对你有帮助：stackoverflow.com/questions/32802202/…

标签： html css flexbox

【解决方案1】：

关键是让您的五个子 div（#mainContainer 内）的宽度为 25%，而不是 250px。

考虑：在 mainContainer 内部，您有五个子 div（我们称它们为外部 div），它们是四到一行（或 25% 宽度），在每个外部 div 内部都有一个内部 div . （内层div的目的只是为了对齐五个子div里面的内容）

您需要在 mainContainer 上使用 flex 以便 (a) 将五个子 div 对齐一行，以及 (b) 换行到下一行 (flex-wrap)。

这五个子 div 中的每一个都应该是 25%，而不是 ___px。这样，第五个（以及第 9 个和第 13 个等）将换行到下一行。此外，您的解决方案将是响应式的 - 这意味着随着屏幕尺寸的变化，您仍将获得 4 对一行。此外，由于您使用 .inner div 对齐内容，溢出的 div（第 5、第 9、第 13 等）可以左对齐。

需要明确：您不需要我添加到示例中的“内部” div 结构。但是，如果您希望五个（或更多？）子 div 中的 contents 居中，则在每个子 div 内创建 div - 并使每个 ( ".inner") div 也可以弯曲，并使用 justify-content (horizontal) 和 align-items (vertical) 对齐内容。

body{
width:100%;
}
.mainContainer{
  width:90%;
  background-color : brown ;
  display:flex;
  flex-basis:25%;
  flex-wrap:wrap;
}

.outer{
  width:25%;
  height:100px;
}
.inner{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.div1{
  background-color:blue;
}
.div2{
  background-color:red;
}
.div3{
  background-color:green;
}
.div4{
  background-color:purple;
}

<div class="mainContainer">
    <div class="outer div1"><div class="inner">div1</div></div>
    <div class="outer div2"><div class="inner">div2</div></div>
    <div class="outer div3"><div class="inner">div3</div></div>
    <div class="outer div4"><div class="inner">div4</div></div>
    <div class="outer div2"><div class="inner">div5</div></div>
</div>

更新：

我刚刚重新阅读了您的问题。如果您希望第 4 个 div 从新行开始，并且在该行的开头，我能想到的唯一方法是添加另一个包装 div 结构，以便有一个“行” div 包含你的“.outer” div。您的“.outer” div 的宽度为：25%，因此它们不会扩展以填充整行。此外，如果 .row div 中只有一个，它将从左侧开始。

【讨论】：

使用 % 会使 div 对于内容来说太小，所以当屏幕很小时，我更喜欢每行有 2 个 div 或 3 个
啊，那么也许你需要使用 BootStrap 之类的东西，你可以在其中为不同的屏幕尺寸指定类。
我认为最好的解决方案是使用网格代替
当然可以，但是网格如何知道要针对不同的屏幕尺寸进行调整？使用 BootStrap，您可以为 xs/sm/md/lg/xl 屏幕尺寸（xtra-small、small、med、lg、xtra-lg）指定类，并决定此 div 在 md/lg/xl 屏幕上的宽度为 25%但 50% 在 xs 或 sm 屏幕上。但这是你的项目，使用最适合你的方法。

【解决方案2】：

您可能想为此使用网格。

.mainContainer{
  width: 90%;
  background-color: brown;
  padding: 20px;
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: auto auto auto;
  grid-template-rows: 150px 150px 150px;
}

如果您从容器中删除固定大小，这将按照您想要的方式布置 div

【讨论】：