Question

我认为这是一件容易的事，但我找不到解决方案。

我有一个Flexbox，每行3个项目。如果没有3项，这些不应该完全完成。

像这样：

1 2 3
4 _ _

在smaler sreens上它应该是这样的：

1 2
3 4

但我得到的是：

1 _
2 _ _ 3 _
4 _

＆＃13;

.flex_container {
  display: flex;
  flex-wrap: wrap;
}

.flex_container .third {
  width: 33.333%;
  padding-right: 10px;
  margin-bottom: 10px;
}

@media(min-width:981px) {
  .flex_container .third:nth-child(3n) {
    padding-right: 0px;
  }
}

@media(max-width:980px) {
  .flex_container .third {
    width: 50%;
    padding: 0px 5px!important;
  }
}

@media(max-width:768px) {
  .flex_container .third {
    width: 100%;
  }
}

＆＃13;

<div class="flex_container">
  <div class="third">1</div>
  <div class="third">2</div>
  <div class="third">3</div>
  <div class="third">4</div>
</div>

＆＃13;

我错过了什么？

Answer 1

你想要的东西（注意这有一个移动优先布局，这有其他一些你可以谷歌找到的好处）：

* {
  box-sizing: border-box;
}
.flex_container {
  display: flex;
  flex-wrap: wrap;
}
.flex_container .third {
  display: inherit;
  flex: 0 1 100%;
  padding:0 10px;
  margin-bottom:10px;
  /* Added to show the boxes when no content */
  min-height: 100px;
  border: 1px solid black;
}

@media(min-width: 768px){
  .flex_container .third{
      flex: 0 1 33%;
  }
}

每行Flexbox项目响应

1 个答案: