html – 在flex-end和space-between与margin之间徘徊

概述在Flexbox的,当我使用证明内容：空间之间的第一项和最后一项是精确对齐到空间在它们之间划分柔性容器的边界.如何将第一个项目与右侧对齐,其他项目也与右侧对齐(而不是整个宽度)？ 下面的示例代码不好,因为当我使用flex-end时,我必须设置项目的边距,因此每行中的第一个不向右粘. #flexcontainer{ display: -webkit-flex; display: flex; 在FlexBox的,当我使用证明内容：空间之间的第一项和最后一项是精确对齐到空间在它们之间划分柔性容器的边界.如何将第一个项目与右侧对齐,其他项目也与右侧对齐(而不是整个宽度)？

下面的示例代码不好,因为当我使用flex-end时,我必须设置项目的边距,因此每行中的第一个不向右粘.

#flexcontainer{  display: -webkit-flex;  display: flex;  flex-wrap:wrap;  -webkit-flex-direction: row;  flex-direction: row;  -webkit-justify-content: flex-end;  justify-content: flex-end;  background:#ff8800;}.flexitem{	display: -webkit-flex;	display: flex;	margin:20px;	wIDth:24%;	background:#666666;	Box-sizing:border-Box;    height:50px;}

<div ID="flexcontainer">  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div>

这也不是很好,因为项目没有对齐(但整个宽度)：

#flexcontainer{  display: -webkit-flex;  display: flex;  flex-wrap:wrap;  -webkit-flex-direction: row;  flex-direction: row;  -webkit-justify-content: space-between;  justify-content: space-between;  background:#ff8800;}.flexitem{	display: -webkit-flex;	display: flex;	margin:0;	wIDth:24%;	background:#888888;	Box-sizing:border-Box;    height:50px;}

<div ID="flexcontainer">    <div ></div>    <div ></div>    <div ></div>  </div>

在我的图像所需的输出(第一个粘到无余量右和第四枝一个到右左如果4族元素存在并且如果多于4个其他对准向右)：

解决方法 AFAIK使用flexBox实现所需输出的最佳效果可以使用以下方法 *** 作flexitems的flex-basis和margin：

margin: 20px;  display: flex;  flex: 0 1 calc(25% - 40px);

>在flex样式中,calc(25％ – 40px)的flex-basis将宽度分为四个,也可以调整边距.
>注意我已设置flex-grow禁用.
> flex-end完成它.

让我知道您的反馈.谢谢！

#flexcontainer {  display: flex;  flex-wrap: wrap;  flex-direction: row;  justify-content: flex-end;  background: #ff8800;}.flexitem {  margin: 20px;  display: flex;  flex: 0 1 calc(25% - 40px);  background: #666666;  Box-sizing: border-Box;  height: 50px;}

<div ID="flexcontainer">  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div>

编辑：

所以我对保证金计算做了一些调整：

>通过减少10px以更改d性基础来调整以在行的左端和右端移除每个20px：

flex: 0 1 calc(25% - 30px);

>最右边/最左边的框位于右/左边缘：

.flexitem:nth-child(4n) {  margin-right: 0;}.flexitem:nth-child(4n + 1) {  margin-left: 0;}.flexitem:last-child {  margin-right: 0;}

给我你的反馈意见.谢谢！

#flexcontainer {  display: flex;  flex-wrap: wrap;  flex-direction: row;  justify-content: flex-end;  background: #ff8800;}.flexitem {  margin: 20px;  display: flex;  flex: 0 1 calc(25% - 30px);  background: #666666;  Box-sizing: border-Box;  height: 50px;}.flexitem:nth-child(4n) {  margin-right: 0;}.flexitem:nth-child(4n + 1) {  margin-left: 0;}.flexitem:last-child {  margin-right: 0;}

<div ID="flexcontainer">  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div>

总结

以上是内存溢出为你收集整理的html – 在flex-end和space-between与margin之间徘徊全部内容，希望文章能够帮你解决html – 在flex-end和space-between与margin之间徘徊所遇到的程序开发问题。

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