Html 即使div中的所有元素都大于div，是否可以对其进行对齐？

我在另一个部门有多个部门

<div class="container">
  <div id="div1">text1</div>
  <div id="div2">text2</div>
  <div id="div3">another text</div>
  ...
  <div id="divN">text N</div>
</div>

文本1
文本2
另一个文本
...
文本N

---

每个内部div没有设置width属性，但它有

display:inline block

，因此每个div都适合其内容（文本）。如果我让它们像这样，内部div水平填充浏览器，直到它们到达行的末尾，并从左侧开始。这对我来说很好。但不幸的是，每一条div的“线”与右侧的距离都不同。我想证明他们，就像我能证明一篇文章一样。我尝试了

display:flex

和

justify-content:space-around

css方法，但它们将所有内部div放在一行中，因此它们的部分在屏幕之外。有没有办法实现我的目标？纯css将是最好的解决方案。

如果使用内联块元素，则可以使用以下设置它们的对齐方式：

此属性描述块的内联级内容的显示方式 如果内容未完全填充，则沿内联轴对齐 接线盒

注意，最后一行的行为不同，如果您也要对其进行调整，还应使用：

此属性描述块的最后一行或一行如何右对齐 当“文本对齐”为“对齐”时，在对齐强制换行之前

文本对齐：对齐；
文本最后对齐：对齐；

.container{
文本对齐：对齐；
-moz文本最后对齐：对齐；
文本最后对齐：对齐；
边框：1px实心；
宽度：500px；
}
.项目{
宽度：100px；
边框：1px纯蓝色；
显示：内联块；
}

文本1
文本2
文本3
文本4
文本5
文本6

是，带有

文本对齐和内联块

调整内容&灵活、包装

/*内联块（childs）*/
.集装箱{
显示：内联块；
文本对齐：对齐；
垂直对齐：顶部；
背景：番茄；
字体大小：0；/*表示最后一个伪行不使用空格选项*/
}
.容器：之后，主体：之后{
内容：''；
显示：内联块；
宽度：100%；
垂直对齐：顶部；/*去除下方的间隙*/
}
/*flex（父级）*/
.集装箱2{
显示：内联flex；
柔性包装：包装；
证明内容：之间的空间；
背景：绿松石；
}
/*两者*/
正文>div{
宽度：200px；
填充：3倍；
边框：实心；
}
div div{
字体大小：1rem；/*如果父字体大小设置为0*/
显示：内联块；
背景：rgba（0,0,0,0.2）/*让我们看一下它们*/；
}
div div：第一个子元素{/*或任何需要跨行的元素*/
颜色：白色；
字体大小：粗体；
背景：无；
宽度：100%；/*100%=整行*/
文本对齐：居中；
}
/*片段*/
身体{
利润率：50像素；
文本对齐：对齐；
}
kbd{
颜色：棕色
}

内联块IE8
文本1
文本2
另一个文本
文本N
文本1
文本2
另一个文本
另一个文本
文本N
文本N
文本1
文本2
另一个文本
文本N
另一个文本
文本N
文本1
嵌入式FLEX IE11
文本1
文本2
另一个文本
文本N
文本1
文本2
另一个文本
另一个文本
文本N
文本N
文本1
文本2
另一个文本
文本N
另一个文本
文本N
文本1

text align:justify

？

flex wrap:wrap

？我不想对齐文本。我想对齐容器中的内部div

text align

设置块容器内联级内容的对齐方式。内联块是内联级内容。flex-wrap with display:flex和justify content是我的目标。谢谢您的建议