将一组包裹好的弹性物品居中 [英] Center a group of wrapped flex items

问题描述

我正在尝试将一组包裹好的弹性物品居中放置。 HTML看起来像这样：

  main {background-color：blue;宽度：390px；显示：flex; justify-content：center;}。container {background-color：red;显示：inline-flex; flex-wrap：wrap;}。a1 {color：grey;宽度：100px；高度：200px；背景颜色：绿色；边框：1像素纯黑色；}  

 < main> < div class = container> < div class = a1>< / div> < div class = a1>< / div> < div class = a1>< / div> < div class = a1>< / div> < / div>< / main>  

绿色框被正确包装，但它们作为一个整体，不在红色区域居中，

无在 .container 上定义宽度，因为红色块可以具有任意大小，并且我想尽可能多地使块彼此相邻。

有人建议如何将包裹好的绿色块居中吗？

更新：根据 2岁的帖子是不可能的。因此，就我而言，我必须使用JavaScript来解决此问题。但是也许我可以使用 CSS网格布局

解决方案

不确定您要进行哪种居中

因此有一些选择：

选项1：将元素放在 .container

中

• 添加 justify-content：center; 到 .container 代替

  main {
 background-color：blue; 
宽度：390px； 
显示：flex; 
} 
 
 .container {
 background-color：red; 
显示：flex; 
 flex-wrap：包装; 
 justify-content：center; 
} 
 
 .a1 {
颜色：灰色； 
宽度：100像素； 
高度：200像素； 
 background-color：绿色； 
边框：1px纯黑色； 
}  

 < main> 
< div class = container> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< / div> 
< / main>  

选项2：将<$ c居中$ c>。容器

• 添加一些宽度 + margin：auto 到 .container

<前置类= snippet-code-css lang-css prettyprint-override> main {
background-color：blue;
宽度：390px；
显示：flex;
justify-content：center;
}

.container {
background-color：red;
显示：inline-flex;
flex-wrap：包装;
宽度：300像素；
保证金：自动；
}

.a1 {
颜色：灰色；
宽度：100像素；
高度：200像素；
background-color：绿色；
边框：1px纯黑色；
框大小：border-box
}

 < main> 
< div class = container> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< / div> 
< / main>  

选项3：两者都居中

  main {
 background-color：blue; 
宽度：390px； 
显示：flex; 
} 
 
 .container {
 background-color：red; 
显示：inline-flex; 
 flex-wrap：包装; 
宽度：90％； 
保证金：自动； 
 justify-content：center; 
} 
 
 .a1 {
颜色：灰色； 
宽度：100像素； 
高度：200像素； 
 background-color：绿色； 
边框：1px纯黑色； 
}  

 < main> 
< div class = container> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< div class = a1>< / div> 
< / div> 
< / main>  

I'm trying to center a group of wrapped flex items. The HTML looks like this:

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

DEMO

The above looks like this:

The green boxes are wrapped correctly, but they, as a whole, are not centered in the red area,

without defining a width on the .container because the red block can have any size and I want to fit as many blocks next to each other as possible.

Any suggestions how to center the wrapped green blocks?

UPDATE: According to this 2 year old post it is not possible. So in my case I have to use javascript to fix this. But maybe I can use CSS Grid Layout

解决方案

Not sure what kind of centering you want do

So a few options:

Option 1: just center the elements in .container

• add justify-content: center; to .container instead

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Option 2: center the .container

• add some width + margin:auto to .container

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 300px;
  margin: auto;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
  box-sizing: border-box
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Option 3: center both from above options

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  justify-content: center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

这篇关于将一组包裹好的弹性物品居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！