flex容器的HTML结构具有三个级别：
- 容器
- 该项目
- 内容
每个级别代表一个独立的独立元素。
该
justify-content属性是在flex容器上设置的，用于控制flex项目。它不能直接控制项目的子项（在这种情况下为文本）。
justify-content: center在行方向容器上设置时，项目将缩小到内容宽度（即缩小以适合）并水平居中。物品内的物品随身携带。
当内容比flex容器窄时， 一切都将居中。
另一方面， 当内容比flex容器宽时
，flex项将不再居中。实际上，由于没有可用空间，因此根本无法对齐项目（
start，，）–项目占用了容器的整个宽度。
end``center
在这种情况下，文本可以换行。但
justify-content: center不适用于文字。从来没有。文本始终受默认设置
text-align:start
（
left在LTR中/
right在RTL中）。
因此，要直接将文本居中，请添加
text-align:center到flex项（或flex容器，由于继承而没有关系）。
article { display: flex; align-items: center; justify-content: center;}.center { text-align: center;}article { width: 100px; height: 100px; margin: 10px; background-color: lightgreen;}<article> <p>some long text here</p></article><article> <p >some long text here</p></article>
