如何使用CSS实现文本单独占行、图表另起一行对齐排列

问题出在外层.bcontainer的flex布局规则：所有直接放在这个容器里的元素（包括文本段落<p>和三个图表容器.chart）都会作为flex子项默认尝试在同一行排列，你之前的修改无效是因为：

• <br>换行符对flex布局的子项排列不生效
• flex容器的直接子元素设置display:block仅作用于元素内部，不会强制占满整行

所需CSS修改 #

你只需要新增一段规则，强制让容器内的文本段落占满整行即可：

/* 让段落单独占满flex容器的一整行 */
.bcontainer > p {
  flex: 0 0 100%;
  margin-bottom: 25px; /* 可以自行调整段落和下方图表的间距 */
}

如果希望3个图表也能稳定排列在同一行不换行，可以调整.chart的规则如下：

.chart {
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    /* 按3个图表平分宽度，自动扣除gap间距 */
    flex: 0 1 calc(33.333% - 17px);
    box-sizing: border-box;
}

修改后就能完全符合预期效果：文本单独占满一行，所有图表统一在下方排列。

内容的提问来源于stack exchange，提问作者Jade west