Question

我有一个包含六个项目的部分。

我要在台式机上每行3个项目，在中型设备上我希望每行2个项目，在移动设备上我希望每行1个项目

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

这是CSS：

.flex-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

这向我显示了台式机上只有3个项目，而移动设备上只有1个项目，但没有2个项目，我需要更改代码以获取所需的内容吗？

Answer 1

您在媒体查询方面做得很好。注意.flex-conteiner中的'e'应该为.flex-container

然后将媒体查询和flex-basis用于其余的屏幕尺寸，例如：

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 768px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 50%;
    }
}

对于较大的屏幕，请使用flex base 33％。

Answer 2

您可以在@trades = SELECT *, // round up to nearest 2ms: new DateTime((time.Ticks + TimeSpan.FromMilliseconds(2).Ticks - 1) / TimeSpan.FromMilliseconds(2).Ticks * TimeSpan.FromMilliseconds(2).Ticks, time.Kind) AS RoundedTimeA FROM @trades; @quotes = SELECT *, // round up to nearest 2ms: new DateTime((time.Ticks + TimeSpan.FromMilliseconds(2).Ticks - 1) / TimeSpan.FromMilliseconds(2).Ticks * TimeSpan.FromMilliseconds(2).Ticks, time.Kind) AS RoundedTimeB FROM @quotes; @result = SELECT * FROM @trades AS A INNER JOIN @quotes AS B ON A.RoundedTimeA == B.RoundedTimeB;中设置flex-basis，希望对您https://codepen.io/paradian/pen/rZQopv有帮助

Answer 3

可以通过调整媒体查询内部的flex-basis来实现布局。

这是主意：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex: 1 0 26%;
}

@media ( max-width: 768px) {
  .flex-container > div {
    flex-basis: 34%;
  }
}

@media ( max-width: 320px) {
  .flex-container > div {
    flex-basis: 51%;
  }
}

/* non-essential demo styles */
.flex-container > div {
  height: 50px;
  background-color: lightgreen;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

jsFiddle demo

在第一个flex规则中，flex-grow设置为1。这意味着弹性项目将消耗所有可用空间。

因此，每个项目的宽度（用flex-basis表示）不再是传统的33.33％（每行3个项目），50％（每行2个项目）和100％。

通常必须手动调整这些数字（例如calc()），以留出一些空白。

在这种情况下，由于使用了flex技术，flex-grow会消耗剩余空间，而flex-basis只需足够大即可执行换行。

因此，例如，对于flex-basis: 26%，行上只能容纳三个项目。第四个必须包装。有足够的利润空间。 flex-grow填满空白处。

Answer 4

以前的答案是正确的，请在非常相似的SO帖子How to make child div fluid with respect to parent中检查我的答案。

我还注意到您的媒体查询错误，您的班级不正确，请对其进行编辑。

响应式弹性框，每行3个项目，然后是2个，然后是1个

4 个答案:

jsFiddle demo