如何创建灵活的div项目后突破？

Question

我正在尝试创建＆＃34;购物项目＆＃34;嵌入div，具有一定的固定宽度和高度。我知道您可以display: inline !important;将div保留在一行。

然而，当窗口尺寸变小时，我怎样才能使它破裂，最好是当外部div较小时？

这是一个例子：

以下是我的尝试：

<div class="row">
            <div class="col-sm-12">

                <div class="items">
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                </div>

            </div>
        </div>

和css：

.items {
    display: flex !important;
    flex-wrap: wrap !important;
    -webkit-flex-wrap: wrap !important;
    -moz-flex-wrap: wrap !important;
    -o-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
}
.item {
    width: 200px !important;
    height: 500px !important;
    margin: 10px !important;
    text-align: center !important;
}

Answer 1

这样容易;

float：left;

Answer 2

您可以使用 CSS Flexbox 。它很容易处理它。

请查看下面的代码段（调整浏览器大小以查看它们的运行情况）：

＆＃13;

＆＃13;

.outer {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  padding-top: 10px;
  text-align: center;
  background: #eee;
  border: 3px solid #aaa;
  margin: 20px;
}

body {
  padding: 20px;
}

＆＃13;

<div class="outer">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 3

使用flex，当框达到宽度的200px时，你也可以设置一个断点（没有mediaquerie），并在整行上跨越它们：

（引导程序包含在代码段中，我真的没有看到麻烦）

.row {
  text-align: center;
}

.items {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.item {
  /* with a breaking point at 200px width */
  min-width: 200px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* or without min-width nor flex, just:
  width:200px; it will wrap everytime needed and boxes will keep a static width */
  height: 150px;/* none or whatever*/
  margin: 10px 30px;/* whatever*/
  text-align: center;
  border: solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12">
    <div class="items">
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
    </div>

  </div>
</div>

Answer 4

如果元素无法增长或缩小，您可以使用flex-basis来确保元素始终为200px。

使用flex速记属性：

flex: 0 0 200px; /* 'flex-grow: 0' 'flex-shrink: 0' 'flex-basis: 200px' */

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  box-sizing: border-box;
  flex: 0 0 200px;  /* <'flex-grow'> <'flex-shrink'> <'flex-basis'> */
  height: 100px;
  margin-bottom: .5em;  /* Space between flex-items vertically*/
  text-align: center;
  border: 2px dashed grey;
}

<div class="row">
  <div class="col-sm-12">
    <div class="items">
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
    </div>
  </div>
</div>

注意：

• 在演示中，我们使用推荐的语法，即使用 flex速记属性。
• 不要过度使用!important标志。在任何课程中都不需要它。
• 为了简化演示，删除了供应商前缀。

Answer 5

作为其他选项的替代方案，我建议看一下同位素（http://isotope.metafizzy.co/）。如果您决定对购物项目进行任何过滤或排序，那么在纯css解决方案中使用它的好处将变得更加明显。