Flexbox 产品网格不起作用

Question

我有一个带有 Bootstrap 的产品网格，并为产品添加了 flexbox 样式。项目框具有相同的高度。

您可以在此处检查网格： https://jsfiddle.net/oet3c3dp/2/

我为父元素 .product-list 添加了基本的 flexbox 样式：

.product-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;

  -webkit-justify-content: space-between;
  justify-content: space-between;
}

然后我添加了子元素的样式：

.product-list .item {
    padding: 0 10px 10px 0px;
    margin-left: 0;
    float: left;
    text-align: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

为什么这不能正常工作？

Answer 1

您缺少课程 .container 和 .row（它们是引导网格的一部分），另外您需要将您的 flex: 0 0 auto 更改为 flex:1

.product-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.product-list .item {
  padding: 0 10px 10px 0px;
  margin-left: 0;
  float: left;
  text-align: center;
  -webkit-flex: 1;
  flex: 1;
}
.product-list .color-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid;
  border-color: #d8d9db;
  display: inline-block;
  vertical-align: middle;
  -webkit-border-top-right-radius: 50%;
  border-top-right-radius: 50%;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-clip: padding-box;
  -webkit-box-shadow: 0 3px 8px -5px black inset, -3px -1px 8px -4px white inset;
  box-shadow: 0 3px 8px -5px black inset, -3px -1px 8px -4px white inset;
}
.product-list h3 {
  font-size: 14px;
  margin: 0px;
  text-transform: uppercase;
  margin-top: 2px;
}
.item-inner {
  position: relative;
  padding: 0 18px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  /*min-height: 300px*/
}
.product-img {
  padding-top: 10px;
  text-align: center;
  /*  min-width: 210px;
    height: 220px;*/
  overflow: hidden;
  /*width: 170px;*/
}
.product-info {
  position: relative;
  /*height: 73px;*/
  padding-top: 20px;
}
.product-info span.extra-info {
  display: block;
  color: #455A64;
  font-size: 12px;
}
.product-img img {
  display: inline-block;
  vertical-align: middle;
  /*    max-width: 210px;
    max-height: 210px;*/
}
.product-list .item .price {
  color: #37474F;
  font-weight: 700;
  font-size: 18px;
  margin-right: 10px;
}
.product-list .item .product-id {
  color: #455A64;
}
.product-list .item-inner:hover {
  box-shadow: 0 3px 6px 0 rgba(51, 51, 51, .2);
}
.product-list .item a:hover {
  color: #651fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="product-list row">
    <div class="item col-xs-6 col-sm-3">
      <div class="item-inner">
        <a href="">
          <div class="product-img">
            <img class="img-responsive" src="http://rp-static.com/common/images/products_new/1728/1_m.jpg?dts={DPL_TS}" alt="">
          </div>
          <div class="product-info">
            <div class="block">
              <span class="price">9,95&nbsp;€</span>
              <span class="product-id">#1728</span>
            </div>
            <h3>TAZA CERAMICA</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item col-xs-6 col-sm-3">
      <div class="item-inner">
        <a href="">
          <div class="product-img">
            <img class="img-responsive" src="http://rp-static.com/common/images/products_new/2100/1_m.jpg?dts={DPL_TS}" alt="">
          </div>
          <div class="product-info">
            <div class="block">
              <span class="price">16&nbsp;€</span>
              <span class="product-id">#2100</span>
            </div>
            <h3>MATRICULA MINI</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item col-xs-6 col-sm-3">
      <div class="item-inner">
        <a href="">
          <div class="product-img">
            <img class="img-responsive" src="http://rp-static.com/common/images/products_new/2638/1_m.jpg?dts={DPL_TS}" alt="">
          </div>
          <div class="product-info">
            <div class="block">
              <span class="price">29&nbsp;€</span>
              <span class="product-id">#2638</span>
            </div>
            <h3>RELOJ PULSERA ZAC</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item col-xs-6 col-sm-3">
      <div class="item-inner">
        <a href="">
          <div class="product-img">
            <img class="img-responsive" src="http://rp-static.com/common/images/products_new/5407/1_m.jpg?dts={DPL_TS}" alt="">
          </div>
          <div class="product-info">
            <div class="block">
              <span class="price">39&nbsp;€</span>
              <span class="product-id">#5407</span>
            </div>
            <h3>BOLSO VAQUERO PEQUEÑO</h3>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>