需要帮助创建一个包裹且均匀的 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

基本上，你可以这样做：

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

.flex-container {

  display: flex;

  flex-wrap: wrap;

}

.flex-item {

  border: 1px solid gray;

  width: 100%;

  margin-bottom: 20px;

}

.flex-sub-item {

  display: flex;

  justify-content: space-between;

}

@media screen and (min-width: 400px) {

  .flex-item {

    width: calc((100% - 20px) / 2);

    margin-right: 20px;

  }

  

  .flex-item:nth-child(2n) {

    margin-right: 0;

  }

}

<div class="flex-container">

  <div class="flex-item">

    <div class="flex-sub-item">

      <div>Title</div>

      <div>Price</div>

    </div>

  </div>

  <div class="flex-item">

    <div class="flex-sub-item">

      <div>Title</div>

      <div>Price</div>

    </div>

  </div>

</div>