Css 如何使用flex让div中的段落并排弹出？

我试图弄清楚如何让div中的p标记并排弹出并显示得有点像一个表，但是使用flex而不是任何float

        <div class="summary">
           <img src="life.jpg" alt="Life's great">
           <div>
              <div>
                 <p>Chapter 1:</p>
                 <p>0-10</p>
              </div>
              <div>
                 <p>Chapter 2:</p>
                 <p>11-20</p>
              </div>
              <div>
                 <p>Chapter 3:</p>
                 <p>21-30</p>
              </div>
           </div>
        </div>

所以输出应该沿着这些线看，除非我有边框之类的东西来设计一个框。我必须使用flex，这让我很恼火

第1章：0-10

第2章：11-20

---

第3章：21-30

应该和在容器上应用display:flex一样简单，你想让flex的子对象在容器中展开，并留出一点空白。下面的代码片段按照您在问题中显示的方式列出了标记。它使用了糟糕的选择器，但我根本不想改变你的HTML结构。但是，我建议将类放在您希望定位的元素上，这样您就可以避免使用元素名作为选择器

.摘要>部门>部门{ 显示器：flex； } .summary>div>div>p：第一个孩子{ 右边距：10px； } 第一章：

0-10

第二章：

11-20

第三章：

21-30

---

没问题-如果答案对你有用，请记得投票/接受。欢迎来到堆栈溢出！