html - 桌面 View 中的 3 列图像，移动 View 中的 2 列图像

Question

我正在尝试制作一个主页，其中有 6 个图像 block 和 3 列。但也希望这 6 个 block 在移动 View 中显示为 2 列。

我附上了一些我希望它看起来像什么的图像以及我正在使用的代码。我尝试了不同类型的 flex-wrap，但无法正常工作。

这是 jsfiddle 的链接 - https://jsfiddle.net/7frjmeat/

这是当前桌面 View

这是我希望移动 View 的样子 -

代码

html,
body,
a,
{
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
}

.flex div {
  flex: 1;
  padding: 2px;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">


  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>
  <div class="line-break"></div>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

Answer 1

所以你需要把所有的元素都放在一个 flex 盒子里才能真正让它影响整个组。此外，您需要为 CSS 设置断点以了解一行中有多少项。我通常只使用最小宽度。

基本上设置元素的宽度，使用 box-sizing 在宽度中包含填充，使用 flex-wrap 包装内容，并将移动版本的宽度更改为两列布局。 **编辑 我还更改了 HTML 以将所有内容放在一个 flex 盒容器中。

这是适用于您的布局的代码。当然，它丢失了 HR 标签。

CSS

html,
body,
a {
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  flex-basis: auto;
  justify-content: space-evenly;
}

.flex div {
  flex: 1;
  padding: 2px;
  min-width: 33%;
  box-sizing: border-box;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
  .flex div {
    min-width: 50%;
  }
}

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<center>
  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>

    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

</center>