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

概述这个问题已经在这里有了答案：            >            Targeting flex items on the last or specific row                                    3个>            Wrapping flex items in the last row

这个问题已经在这里有了答案：            >            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 >      <div >          <div >          </div>          <div >          </div>          <div >          </div>          <div >          </div>          <div >          </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 >    <div >      <div >      </div>      <div >      </div>      <div >      </div>      <div >      </div>      <div >      </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 >  <div >  </div>  <div >  </div>  <div >  </div>  <div >  </div>  <div >  </div></div>

jsFiddle 总结

以上是内存溢出为你收集整理的html-结合flex-start和空格之间的外观 全部内容，希望文章能够帮你解决html-结合flex-start和空格之间的外观 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。