Question

我制作了一个演示，其中我制作了1 x 4格； 1行4列。它工作正常，但是当用户屏幕小于720px时，我希望它显示2 x 2的网格。我尝试使用this之类的媒体查询：

body, * {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
}

.box {
  height: 100px;
  border: 1px solid;
  box-sizing: border-box;
  flex: 1;
  background-color: grey;
}


 @media only screen and (min-width: 360px) and (max-width: 720px) {
   .box {
       background-color: blue;
   }
 }

当屏幕尺寸小于720px时如何更改我的布局？

bin：https://jsbin.com/xudihuxato/edit?html,css,output

Answer 1

@media only screen and (min-width: 360px) and (max-width: 720px) {

  .wrapper {
    flex-wrap: wrap;
  }

  .box {
    flex-basis: 34%;
    background-color: blue;
  }

}

在主代码中，您将弹性项目设置为flex: 1。这是相当于的速记：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

从本质上讲，这会占用行上的整个空间，并将其平均分配给四个项目。

要使项目分成2x2网格，请在媒体查询中设置以下规则：

允许使用flex-wrap: wrap包装这些物品。默认值为nowrap。
将flex-basis设置为50％，因此每行只能容纳两个项目。

如果要为边框，填充和/或边距留出空间，请将flex-basis设置为34％（或类似的值）。

在主规则中定义flex-grow: 1的情况下，flex-basis不必为50％，由于边界，填充或边距，每行可能会产生一项。

由于flex-grow将占用该行的可用空间，因此flex-basis仅需要足够大即可实施换行。

在这种情况下，flex-basis: 34%的边距有足够的空间，但每行中的第三项没有足够的空间。

Flexbox中的2x2网格

1 个答案: