在弹性框下创建网格

问题描述 投票：0回答：2

我目前正在为一个网站创建一个登陆页面，其中一个部分使用了 flex 显示。在这个部分下面，我想为另一个部分创建一个网格，但是内容显示在“flex”内容之间而不是下面，我不确定如何修复它以使内容显示在另一个部分的下面.

下面是弹性框的 CSS 和 HTML 以及我试图在下面添加的网格：

.grid-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
  justify-content: space-around;
  padding-bottom: 4rem;
}

.image1,
.image2,
.image3 {
  height: 10rem;
  margin: 4rem 0 0 0;
}

.image {
  width: auto;
  height: auto;
}

@media (max-width: 800px) {
  .grid-container2 {
    flex-direction: column;
  }
}

.text {
  font-family: Merge;
  font-size: large;
}

.link {
  font-family: Merge;
  font-size: small;
  color: black;
}

.grid-container3 {
  display: grid;
  grid-template-areas: 'col1 col2 col3';
}
<div class="grid-container2">
  <div class="image1">
    <img class="image" src="images/Customer Landing Page.jpg" alt="Customer - Make a service request">
    <div class="text">Make a service request</div>
    <a class="link" href="">Sign up as a customer</a>
  </div>
  <div class="image2">
    <img class="image" src="images/Contractor Landing Page 2.jpg" alt="Contractor - Decide on jobs">
    <div class="text">Decide what orders you want to fulfill</div>
    <a class="link" href="">Decide which job suits you best</a>
  </div>
  <div class="image3">
    <img class="image" src="images/Contractor Landing Page.jpg" alt="Contractor or Business - Create account">
    <div class="text">Orders completed by professionals</div>
    <a class="link" href="">Sign up as a business or contractor</a>
  </div>
</div>

<div class="grid-container3">
  <div class="col1">
    1
  </div>
  <div class="col2">
    2
  </div>
  <div class="col3">
    3
  </div>
</div>

下面是我想要实现的目标——在三张图片下方创建一个网格，我可以在其中添加圆角矩形和其他对象/文本。

使用当前代码，图像出现在 flex box 段中。

html css flexbox css-grid
2个回答
0
投票

1.) 您的问题可以通过创建一个

container
类来解决。您应该将此类设置为使用
flex
显示并将其定位在
column
方向，如下所示：

.container {
  display: flex;
  flex-direction: column;
}

将此类应用于 div 后，您的所有组件都将堆叠在一起。这样，您的第一个组件可以是一个包含三个图像的 div，并且还设置为使用 flex 显示。第二个组件可以是网格。第三个组件可以是一个列表。等等……

2.)此外，您忘记将

grid-container2
类设置为使用
flex
显示并将其默认放置在
row
方向。

.grid-container2 {
  display: flex;
  flex-direction: row;
}

3.) 在您的 

grid-container3
类中，您将 默认列宽设置为 1，这意味着即使超过 800px 视口宽度，也只会显示一列。要fix这个，你应该调整默认列宽大于1，或者使用媒体查询来修改在大屏幕上显示的列数。

.grid-container3 {
  display: grid;

  /* Can use it... */
  /* grid-template-columns: 1fr 1fr 1fr; */
  /* Or more professionally: */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 20px;
}

@media (max-width: 800px) {
  .grid-container3 {
    grid-template-columns: 1fr;
  }
}

4.) 不要忘记添加 

meta
标签，使响应从 
<head>
:

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

根据你的例子：

/* added */

.container {
  display: flex;
  flex-direction: column;
}

.grid-container2 {
  display: flex;
  flex-direction: row;
}


/* original */

.image1,
.image2,
.image3 {
  height: 10rem;
  margin: 4rem 0 0 0;
}

.image {
  width: auto;
  height: auto;
}

@media (max-width: 800px) {
  .grid-container2 {
    flex-direction: column;
  }
}

.text {
  font-family: Merge;
  font-size: large;
}

.link {
  font-family: Merge;
  font-size: small;
  color: black;
}

.grid-container3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* edited */
  gap: 20px;
}

/* added */

@media (max-width: 800px) {
  .grid-container3 {
    grid-template-columns: 1fr;
  }
}
<!-- in head -->
<meta content="width=device-width, initial-scale=1" name="viewport" />

<!-- in body -->
<div class="container">
  <!-- your code implement to main container -->
  <div class="grid-container2">
    <div class="image1">
      <img class="image" src="https://via.placeholder.com/150" alt="Customer - Make a service request">
      <div class="text">Make a service request</div>
      <a class="link" href="">Sign up as a customer</a>
    </div>
    <div class="image2">
      <img class="image" src="https://via.placeholder.com/150" alt="Contractor - Decide on jobs">
      <div class="text">Decide what orders you want to fulfill</div>
      <a class="link" href="">Decide which job suits you best</a>
    </div>
    <div class="image3">
      <img class="image" src="https://via.placeholder.com/150" alt="Contractor or Business - Create account">
      <div class="text">Orders completed by professionals</div>
      <a class="link" href="">Sign up as a business or contractor</a>
    </div>
  </div>

  <div class="grid-container3">
    <div class="col1"> 1 </div>
    <div class="col2"> 2 </div>
    <div class="col3"> 3 </div>
  </div>
</div>

-1
投票

.grid-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
  justify-content: space-around;
  padding-bottom: 4rem;
}

.image1,
.image2,
.image3 {
  height: 10rem;
  margin: 4rem 0 0 0;
}

.image {
  width: auto;
  height: auto;
}

@media (max-width: 800px) {
  .grid-container2 {
    flex-direction: column;
  }
}

.text {
  font-family: Merge;
  font-size: large;
}

.link {
  font-family: Merge;
  font-size: small;
  color: black;
}

.grid-container3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
<div class="grid-container2">
  <div class="image1">
    <img class="image" src="images/Customer Landing Page.jpg" alt="Customer - Make a service request">
    <div class="text">Make a service request</div>
    <a class="link" href="">Sign up as a customer</a>
  </div>
  <div class="image2">
    <img class="image" src="images/Contractor Landing Page 2.jpg" alt="Contractor - Decide on jobs">
    <div class="text">Decide what orders you want to fulfill</div>
    <a class="link" href="">Decide which job suits you best</a>
  </div>
  <div class="image3">
    <img class="image" src="images/Contractor Landing Page.jpg" alt="Contractor or Business - Create account">
    <div class="text">Orders completed by professionals</div>
    <a class="link" href="">Sign up as a business or contractor</a>
  </div>
</div>

<div class="grid-container3">
  <div class="col1">
    1
  </div>
  <div class="col2">
    2
  </div>
  <div class="col3">
    3
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.