我想创建一个带有特色图片的产品页面，因此我使用了无序列表标签和 flexbox CSS。但我无法存档我的目标，我也在 codepen 上分享了这段代码并附上了所需的目标，请帮忙。
我尝试了我在 codepen 上分享的代码:
' https://codepen.io/Muhammad-Fahim/pen/OJLjOoq '
我需要以下结果
' https://i.ibb.co/WsQC8Ng/Group-189.jpg '
$direction : left;
.product-listing-box {
margin: 0px;
padding: 0px;
float: #{$direction};
width: 100%;
ul {
margin: 0px;
padding: 30px 0px 0px;
width: 100%;
li {
margin: 0px 0px 15px;
padding: 0px;
list-style-type: none;
// float: #{$direction};
}
.pro-img {
margin: 0px;
padding: 0px;
float: #{$direction};
width: 100%;
text-align: center;
img {
display: inline-block;
}
}
.pro-name {
margin: 5px 0px 0px;
padding: 0px 15px;
float: #{$direction};
width: 100%;
text-align: center;
}
.pro-description {
margin: 5px 0px 0px;
padding: 0px 15px;
float: #{$direction};
width: 100%;
text-align: center;
}
.pro-price {
margin: 5px 0px 0px;
padding: 0px 15px;
float: #{$direction};
width: 100%;
text-align: center;
}
}
&.no-feature-product {
ul {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
// -webkit-flex-direction: column;
// -moz-flex-direction: column;
// -ms-flex-direction: column;
// flex-direction: column;
//
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: stretch;
li {
-webkit-flex: 1 0 25%;
-moz-flex: 1 0 25%;
-ms-flex: 1 0 25%;
flex: 1 0 25%;
&:first-child{
.pro-img {}
.pro-name {}
.pro-description {}
.pro-price {}
}
}
}
}
&.feature-product {
ul {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: flex-start;
li {
display: flex; /* so child elements can use flexbox stuff too! */
flex: 0 0 25%;
align-items: flex-start;
&:first-child{
flex: 0 0 50%;
.pro-img {}
.pro-name {}
.pro-description {}
.pro-price {}
}
}
}
}
}<!-- Product listing box Start Below -->
<div class="row">
<div class="col-xs-offset-0 col-xs-12 col-sm-offset-0 col-sm-12 col-md-12 no-padding-md-lg">
<div class="product-listing-box feature-product">
<ul>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Product listing box End Above -->最佳答案
重构 html，在 div 中定义行，并在这些行中正确使用 display: flex;，您会在设计中看到。您可以引用以下 HTML 以供引用。
<!-- Product listing box Start Below -->
<div class="row">
<div class="col-xs-offset-0 col-xs-12 col-sm-offset-0 col-sm-12 col-md-12 no-padding-md-lg">
<div class="product-listing-box feature-product">
<ul>
<div style="display: flex;align-items: center;">
<div style="flex: 2;"><li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li></div>
<div style="display: flex; flex-direction: column;flex: 1;">
<div style="flex: 1;display: flex;">
<li style="flex:1;">
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li style="flex:1;">
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
</div>
<div style="flex: 1;display: flex;">
<li style="flex:1">
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li style="flex: 1;">
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
</div>
</div>
</div>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="">
<span class="pro-img">
<img src="https://www.91-img.com/pictures/133710-v6-realme-c2-mobile-phone-large-1.jpg" alt="" class="img-responsive">
</span>
<span class="pro-name">Product name</span>
<span class="pro-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<span class="pro-price">25.90</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Product listing box End Above -->
关于html - 带有 flexbox 的一个大产品 View 的产品列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57737729/