html - 需要帮助创建一个可包裹且平整的 Flex-box 容器
问题描述
尝试为食物菜单创建一个 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 €</h3>
</div>
<div class="ptags">
<p class="allergens">Allergens:</p>
<p class="info">Milk, Gluten</p>
</div>
</div>
</div>
如何使用 flexbox 将价格与名称隔开?
解决方案
基本上,您可以执行以下操作:
* {
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>
推荐阅读
- r - 如何使用第二个数据帧作为键“翻译”一个数据帧中的变量?
- javascript - 全局变量的意外更新
- node.js - (node.js) 交替安装 NPM 和 YARN
- java - 为什么我会收到此异常错误?ArrayOutOfBounds?
- perl - Perl逐行读取文件输出SHA256
- php - Laravel问题上次登录,每行都标记时间
- image - 在单色图像中找到具有浮点区域的最大内接正方形
- django - Django 3.0 值错误
- javascript - Can I omit Return value in arrow function in JavaScript?
- python - 简单文本推荐系统的语法错误