html-结合flex-start和空格之间的外观

这个问题已经在这里有了答案： > Targeting flex items on the last or specific row 3个
> Wrapping flex items in the last row 1个
我有一个要与CSS一起显示的项目列表.最初,在一行上并排只有两个项目,但是现在我想使其对较大的屏幕响应,因此我想使其在一行上显示3个项目.我的旧代码看起来像这样,其中justify-content：space-between.看起来不错,可以显示奇数个项目.

.flex-container-old{
  margin-top: 50px;
  background: magenta;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.Box-old{
  width: 40%;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 300px;
  background: orange;
}

.wrapper{
  margin: 0 auto;
  width: 80%;
}

body{
background:#D3D3D3;
}

<div class="wrapper">
      <div class="flex-container-old">
          <div class="Box-old">
          </div>
          <div class="Box-old">
          </div>
          <div class="Box-old">
          </div>
          <div class="Box-old">
          </div>
          <div class="Box-old">
          </div>
      </div>
  </div>

因此,我很自然地通过修改width属性将其扩展为一行中的三项,直到最后得到以下结果.

.flex-container-new{
  background: lightblue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.Box {
  width: 30%;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 300px;
  background: orange;
}

.wrapper{
  margin: 0 auto;
  width: 80%;
}

<div class="wrapper">
    <div class="flex-container-new">
      <div class="Box">
      </div>
      <div class="Box">
      </div>
      <div class="Box">
      </div>
      <div class="Box">
      </div>
      <div class="Box">
      </div>
    </div>
</div>

在上面的代码中一行包含三个项目的情况下,我的问题是我希望将最后一行中的最后一个项目推到左侧,并与上面一行中的中间项目对齐.不幸的是,引导程序不是一个选择.这是出于学习目的.有没有办法我可以仅使用CSS来实现以上目标？提前谢谢了.

最佳答案

使用CSS Grid可以更轻松地控制它,因为我们可以同时指定x和y轴.使用FlexBox,您只能可靠地控制x轴.如果您尚未听说过fr单位,则为defined by Mozilla,如下所示：

The fr,which is short for “fraction”,is a unit which represents a fraction of the available space in the grid container.

使用Grid的另一个好处是,我们可以删除.Box中设置的height和margin-bottom底部以及flex-wrap规则.从单元格的高度到它们之间的网格间隙间距,有关此网格布局的所有内容均在父级中定义.

.grid-container-new {
  background: lightblue;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,300px);
  grid-gap: 20px;
}

.Box {
  border: 1px solid black;
  background: orange;
}

<div class="grid-container-new">
  <div class="Box">
  </div>
  <div class="Box">
  </div>
  <div class="Box">
  </div>
  <div class="Box">
  </div>
  <div class="Box">
  </div>
</div>

jsFiddle

原文链接：https://www.f2er.com/html/530463.html

html-结合flex-start和空格之间的外观

猜你在找的HTML相关文章