嘗試為食物菜單創(chuàng)建一個 2 列、3 行的 Flexbox 容器。產(chǎn)品元素（每行應有 2 個）在收縮時不會換行。我正在尋找一種使用 Flexbox 創(chuàng)建環(huán)繞布局的方法。另外，當布局因移動尺寸而縮小時，使用媒體查詢來顯示產(chǎn)品標題的最佳方法是什么？我附上我的 jsfiddle 代碼：https://jsfiddle.net/5ksd34nf/#&togetherjs=Ix1LEBTca6（請記住，沒有圖像，設計發(fā)生變化，所以我附上照片）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 將價格與名稱分開？
1 回答
叮當貓咪
TA貢獻1776條經(jīng)驗 獲得超12個贊
基本上，你可以這樣做：
* {
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>
- 1 回答
- 0 關注
- 176 瀏覽
添加回答
舉報
0/150
提交
取消