Question

一旦屏幕变为900px及更小，我想将5个列（A，B，C，D，E）的Flexbox显示为2列。

我的HTML：

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
</div>

我的CSS设置：

.container{
  background:#231F20;
  display:flex;
  flex-wrap:wrap;
}

.box{
  flex:1;
  text-align:center;
  border:5px solid #ADA8AA;
  color:white;
  padding:2rem;
  font-size:2rem;
  background:#423e3f;
  box-sizing: border-box;
}

一旦使用

变小，我就设法从5列变为2列

@media screen and (max-width: 900px) {
    .box{
         flex: auto;
         width: 50%;
    }
}

我的问题是最后一个方框（E）是完全伸展的，我想只显示50％宽，我怎么能这样做？

工作示例here。

Answer 1

您可以将max-width应用于最后一个.box元素，如下所示：

@media screen and (max-width: 900px) {
  .box{
   width: 50%;
   flex: auto;
  }
  .box:last-child {
    max-width:50%;
  }
}

Answer 2

如果您将css更改为

@media screen and (max-width: 900px) {
    .box {
      width: 50%;
      flex: auto;
    }
    .box:last-child {
       max-width: 50%;
    }
}

你会得到这个：https://codepen.io/anon/pen/mBdGNg（它是你样本的一个分支）

Answer 3

HTML代码

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
</div>

CSS代码

.container{
  background:#231F20;
  display:flex;
  flex-wrap:wrap;
}
.box{
  flex:1;
  text-align:center;
  border:5px solid #ADA8AA;
  color:white;
  padding:2rem;
  font-size:2rem;
  background:#423e3f;
  box-sizing: border-box;
}

只需在@media屏幕中更改一些值

 @media screen and (max-width: 900px) {
.box {
  width: 50%;
  flex: auto;
}
.box:last-child {
   max-width: 50%;
}

}

随意提出任何问题

使用CSS显示的响应式网格：flex

3 个答案: