css div坚持使用响应

Question

div.wrapper div.items使用display:inline-block

我想为它们添加填充，但我也希望这些项目能够粘贴到左右产品上。

如何通过响应来做到这一点？

这是我的HTML

    <div class="wrapper">
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
    </div>

这是我想要的布局：

Answer 1

你也可以使用display: flex 和响应使用flex: 0 0 200px/*this is for example*/;

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  border:1px solid #000;
}

.wrapper>div {
  width: 30%;
  flex: 0 0 200px;
  height: 100px;
  outline: 1px solid red;
  margin: 20px;
}

<div class="wrapper">
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
</div>

Answer 2

相应地进行更改，希望这将解决您的问题

display : flex
flex-direction:row;
justify-contents:space-around