主页 / 问题 / 733122
Accepted
Shperung
Asked:2020-10-19 22:31:01 +0000 UTC2020-10-19 22:31:01 +0000 UTC

在最后一行中，将块推到左边缘

  • 772

我正在尝试对块进行这样的放置，但是在不同分辨率的最后一行中，块与其他块的大小不对应，并且没有被压到左边缘。我想用flex-grow: 1;and添加空块flex-basis: 150px，在这种情况下它工作正常。没有空块怎么办？在此处输入图像描述

section {
  display: flex;
  flex-wrap: wrap;
}

article {

 flex-basis: 150px;
  height: 100px;
  background-color: green;
  color: #fff;
  margin-right: 10px;
   margin-bottom: 10px; 
   flex-grow: 1;
}
<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
  <article>13</article>
  <article>14</article>
  <article>15</article>
</section>

вёрстка

1 个回答

  1. Best Answer

    尝试以下操作：

    1. 从块中删除 flex-basis 和 flex-grow。
    2. 设置容器的最大和最小宽度。
    3. 块本身的宽度是使用 calc 计算的，基于在不同的屏幕宽度范围内（通过媒体查询），一行中应该有多少块。

    下面的示例假设页面宽度可以在 320px 到 1200px 之间变化，容器宽度是页面宽度的 95%，并且以下最大屏幕宽度适合块到容器中：

    • 1200px - 6 块；
    • 1000px - 5 块；
    • 850px - 4 块；
    • 700px - 3 块；
    • 520px - 2 块；
    • 350 像素 - 1 块。

    PS 在您的代码中，块从容器向右和从底部缩进 10px，保存在这里。

    section {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
}

article {

  width: calc((100% - 60px) / 6);
  height: 100px;
  background-color: green;
  color: #fff;
  margin-right: 10px;
  margin-bottom: 10px; 
/*  flex-grow: 1;*/
}

@media screen and (max-width: 1000px) {
  article {
    width: calc((100% - 50px) / 5);
  }
}

@media screen and (max-width: 850px) {
  article {
    width: calc((100% - 40px) / 4);
  }
}

@media screen and (max-width: 700px) {
  article {
    width: calc((100% - 30px) / 3);
  }
}

@media screen and (max-width: 520px) {
  article {
    width: calc((100% - 20px) / 2);
  }
}

@media screen and (max-width: 350px) {
  article {
    width: calc(100% - 10px);
  }
}
    <section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
  <article>13</article>
  <article>14</article>
  <article>15</article>
</section>

    • 0

相关问题