需要帮助创建一个包裹且均匀的 Flex-box 容器

Question

尝试为食物菜单创建一个 2 列、3 行的 Flexbox 容器。产品元素（每行应有 2 个）在收缩时不会换行。我正在寻找一种使用 Flexbox 创建环绕布局的方法。另外，当布局因移动尺寸而缩小时，使用媒体查询来显示产品标题的最佳方法是什么？

我附上我的 jsfiddle 代码：

https://jsfiddle.net/5ksd34nf/#&togetherjs=Ix1LEBTca6

（请记住，没有图像，设计发生变化，所以我附上照片）

HTML 是：

`

<section class="menu-page" id="Menu">

    <div class="TitleWrapper">

      <h1 class="title">Menu</h1>

    </div>

    <div class="menu-list">

      <div class="product">

        <div class="imgwrapper">

          <img src="images/burger.jpg" alt="Burger" class="food-image">

        </div>

        <div class="text">

          <div class="product-content">

            <h3 class="name">Burgers</h3>

            <h3 class="price">10 &euro;</h3>

          </div>

          <div class="ptags">

            <p class="allergens">Allergens:</p>

            <p class="info">Milk, Gluten</p>

          </div>

        </div>

      </div>

如何使用 Flexbox 将价格与名称分开？

Answer 1

基本上，你可以这样做：* {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; box-sizing: border-box;}.flex-container {&nbsp; display: flex;&nbsp; flex-wrap: wrap;}.flex-item {&nbsp; border: 1px solid gray;&nbsp; width: 100%;&nbsp; margin-bottom: 20px;}.flex-sub-item {&nbsp; display: flex;&nbsp; justify-content: space-between;}@media screen and (min-width: 400px) {&nbsp; .flex-item {&nbsp; &nbsp; width: calc((100% - 20px) / 2);&nbsp; &nbsp; margin-right: 20px;&nbsp; }&nbsp;&nbsp;&nbsp; .flex-item:nth-child(2n) {&nbsp; &nbsp; margin-right: 0;&nbsp; }}<div class="flex-container">&nbsp; <div class="flex-item">&nbsp; &nbsp; <div class="flex-sub-item">&nbsp; &nbsp; &nbsp; <div>Title</div>&nbsp; &nbsp; &nbsp; <div>Price</div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="flex-item">&nbsp; &nbsp; <div class="flex-sub-item">&nbsp; &nbsp; &nbsp; <div>Title</div>&nbsp; &nbsp; &nbsp; <div>Price</div>&nbsp; &nbsp; </div>&nbsp; </div></div>