具有3列的Flex容器：左侧的图像，图像居中后的内容和可点击的容器

Question

我需要一个具有3列(共9项)PC设备的柔性容器，整个容器必须是可点击的。容器的左边是图片，右边是文字。

移动设备>CSS@media直到800px为一列。挑战是最新的4个容器在容器上有不同的类或ID，因为我想为移动设备显示仅5个容器(将该类隐藏到设备直到800px与display:none)。

.myflex-container {
display: flex;
flex-direction: row;
font-size: 20px;
text-align: center;
}
.myflex-item-left,
.myflex-item-right {
flex: 50%;
margin: 10px;
}
img.imgoxauto {
height: 100%;
width: 74px;
}
.myprod-image {
height: 74px;
margin-right: 10px;
}
.myflex-item-left>a,
.myflex-item-right>a {
display: flex;
}
.clickable-card {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
margin-bottom: 10px;
}
.myflex-item-left>a,
.myflex-item-right>a {
display: flex;
align-items: center;
}
h5.texth5.myprod-name {
padding-bottom: 0;
}

<div class="myflex-container">
<div class="myflex-item-left">
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="London" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Paris</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/HYZ1Ci5.jpg" alt="London" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Frankfurt</h5>
</div>
</a>
</div>
<div class="myflex-item-right">
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">New York</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Geneva</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">New York</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Geneva</h5>
</div>
</a>
</div>
</div>

Answer 1

我会删除你的my-flex项目div并添加flex wrap到容器，然后你可以给你的卡片一个宽度，并改变宽度与媒体查询桌面

.myflex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: 20px;
text-align: center;
}
img.imgoxauto {
height: 100%;
width: 74px;
}
.myprod-image {
height: 74px;
margin-right: 10px;
}
.clickable-card {
width: calc(100% - 20px);  /* one per column */
margin: 10px;
display: flex;
align-items: center;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
margin-bottom: 10px;
}
@media (min-width:800px) {
.clickable-card {
width: calc(50% - 20px); /* 2 per column above 800px */
}
}
@media (min-width:1024px) {
.clickable-card {
width: calc(33.33333% - 20px); /* 3 per column above 1024px */
}
}
h5.texth5.myprod-name {
padding-bottom: 0;
}

<div class="myflex-container">
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="London" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Paris</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/HYZ1Ci5.jpg" alt="London" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Frankfurt</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">New York</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Geneva</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">New York</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Chicago" />
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Geneva</h5>
</div>
</a>
</div>

Answer 2

我想它能帮到你。

.myflex-container {
display: flex;
flex-direction: row;
font-size: 20px;
text-align: center;
}
.myflex-item-left,
.myflex-item-right {
width: 50%;
margin: 10px;
}
img.imgoxauto {
height: 100%;
width: 74px;
}
.myprod-image {
height: 74px;
margin-right: 10px;
}

.clickable-card {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
margin-bottom: 10px;
width: 100%;
display: flex;
}
.myflex-item-left > a, .myflex-item-right > a {
display: flex;
align-items: center;
}
h5.texth5.myprod-name {
padding-bottom: 0;
}
@media (min-width: 800px) {
.myflex-item-left {
width: 33%;
margin: 10px;
}
.myflex-item-right {
width: 66%;
margin: 10px;
}
.right-child {
display: flex;
flex-direction: row;
width: 100%;
}
.right-child a:first-child {
margin-right: 20px;
}
}

<div class="myflex-container">
<div class="myflex-item-left">
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/GmtzHkT.jpg"
alt="London"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">London</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/jPGPiJN.jpg"
alt="London"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Paris</h5>
</div>
</a>
<a href="https://www.example.com/abc" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/HYZ1Ci5.jpg"
alt="London"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Frankfurt</h5>
</div>
</a>
</div>

<div class="myflex-item-right">
<div class="right-child">
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/GmtzHkT.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/0MAl65z.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">New York</h5>
</div>
</a>
</div>
<div class="right-child">
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/GLLQ3VQ.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Geneva</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/GmtzHkT.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Chicago</h5>
</div>
</a>
</div>
<div class="right-child">
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/0MAl65z.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">New York</h5>
</div>
</a>
<a href="https://www.example.com/xyz" class="clickable-card">
<div class="myprod-image">
<img
class="imgoxauto"
src="https://i.imgur.com/GLLQ3VQ.jpg"
alt="Chicago"
/>
</div>
<div class="myprod-description">
<h5 class="texth5 myprod-name">Geneva</h5>
</div>
</a>
</div>

</div>
</div>