前端想让固定几个盒子能距离间距相等在每一行显示

SY_FC

已于 2022-06-02 14:42:26 修改

阅读量1k

点赞数

文章标签：前端 css css3 小程序

于 2022-06-02 09:48:54 首次发布

本文链接：https://blog.csdn.net/FUFCY/article/details/125095105

版权

给父盒子css设置了下面样式，发现一层能有相同距离，第二层就靠中间而不是靠左了

display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;

所以想第二层的只有1,2个都靠左有相同间距就把父盒子css的justify-content: space-around;去掉给每个子盒子css加上

width:33% ;

display: flex;
justify-content: center;
align-items: center;

就可以了，就是行有几个盒子就用100%除个数，比如我一行要显示5个，那给每个盒子设置20%

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SY_FC

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

C3之弹性盒子

qq_46179838的博客

04-20

987

flex盒子常用属性一、父元素1、flex-direction2、flex-wrap3、justify-content4、align-items5、align-content二、子元素1、order2、align-self3、flex-grow4、flex-shrink5、flex-basis三、flex-basis和width的联系flex应用一、动态增加导航栏二、等分布局（四等分、二等分，中间可加margin）三、其中一个固定宽度的布局（固定一个、固定两个······）四、圣杯布局常用属性一、父元素

【HTML】 div并排显示无空隙（占满显示屏）+等距排列

weixin_44512370的博客

08-22

4013

最终效果代码基于浏览器的页面大小进行布局，实现div撑满整个屏幕的近似效果，但在实际操作中需要考虑更多的因素，来达到撑满显示屏的效果。最终代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="height:100%"> <head> <meta charset="utf-8" /> <title>div in line&l

参与评论您还未登录，请先登录后发表或查看评论

html怎么让盒子对齐,CSS实现多个元素在盒子内两端对齐效果

weixin_30910583的博客

06-07

2388

元素俩端对齐的排列布局在实际的开发当中随处可见，使用flex布局的--justify-content ： space-between即可轻松实现，但有些场景下需要考虑兼容等问题，不得不放弃flex布局，所以我们想要实现同样的效果就需要研究排版，在网络搜索了一番答案后，发现真正简单且实质性能够解决问题的，寥寥无几，确实我在实际项目中经常碰到此类布局，所以我利用业余时间，将其原理实现分享于此，以供交流...

CSS 让盒子内外边距大小相同

wyzhang0214的博客

03-21

355

当使用百分数设置margin和padding时，使用相同的数值，可让盒子内外边距大小相同。这是因为当你用百分数设定内外边距的时候，值是以内联尺寸进行计算的，即对于左右书写的语言来说的宽度。例如： <div class="box"> I have margin and padding set to 10% on all sides. </div> .box { border: 5px solid darkblue; width: 300px; margin: 10

css 使盒子之间有间距两边对齐

Yangli_nn的博客

08-09

5862

大盒子： margin-left :-10px; margin-right : -10px；小盒子设置边距： 1） padding-left: 10px; padding-right :10px; 2) margin-left: 10px; margin-right: 10px; <function> 固定宽度 <function-item> 不设置宽度 margin-left:-10px; margin-right:-

css样式---一行五个盒子多余换行间隔 10rpx

szwwwx的博客

06-05

798

【代码】css样式---一行五个盒子多余换行间隔 10rpx。

2023高薪前端面试题（一、前端基础——css）

iaz999的博客

04-28

1447

Flex如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。js动画与css3动画的区别_js逐帧动画_Sco_Jing1031的博客-CSDN博客。

web前端面试题（必背面试题）

热门推荐

Z_Gleng的博客

05-25

3万+

自己总结的常见的面试题总字数13万+ 大概有200+左右道题会不定期更新

自学前端第二十六天:flex弹性盒子

weixin_47592060的博客

03-04

3095

CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵) 1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这

flex布局，弹性盒子，css使用及理解

qq_54598736的博客

10-11

1136

flex布局，弹性盒子，css使用及理解

flex多行两端布局（消除行间距，不满时左对齐）

九日的博客

07-23

2180

当数量不足时，用不显示的元素补足数量，即可完成不满时左对齐垂直方向设置align-content: flex-start;即可实现换行时无行间距，之后自行设置样式可控制行间距父元素样式 .swiper-item{ display: flex; align-items: center; justify-content: space-between; flex-flow:row wrap; align-content: flex-start; } <view class="swiper_box"&g

css解决含不同字数的相同宽度的多个盒子，自动排列对齐（基础实用）

high_height的博客

01-05

6904

文本2端对齐 - flex *{padding: 0;margin: 0;} html,body{height: 100%} ul{list-style: none;} .plist { position: relative; padding: 9px 15px; background-color: #fff; } .plist .plist-

使用flex布局，实现子盒子之间的间隔固定，子盒子可以随着父盒子的大小进行调整

时光淡然

09-23

9338

实现子盒子在父盒子中间隔相等的排列效果图就是上面这样的，就是每个子盒子的间隔是固定的，盒子的大小是可以根据父元素的大小进行调整的。父元素设置的代码 height: calc(100% - 58px);//高度是根据自己的需要进行设置 width: 100%;//宽度是根据自己的需要进行设置 margin-top: 23.2px; padding-left: 24px;//设置的是margin好像不影响 padding-right: 24px;//这个设置的是mar

盒子模型（Box Model）

御坂御坂001的博客

10-19

693

盒子模型：把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

前端那些事系列之基础篇CSS盒子模型（二）

Anissa000的博客

09-26

126

flex布局 transform,transition,animation 盒子模型

flex-warp换行后之间的间隔调整

weixin_52563146的博客

08-11

1万+

flex-warp换行后之间的间隔调整没加align-content属性之前的代码是这样的： .branchWorkshop ul{ display: flex; width: 90%; height: 100%; margin:0; padding:0; flex-wrap: wrap; /* ul盒子里面的内容水平居中 */ margin:0 auto; } 效果是这样的：总结：没加align-content之前，元素在换行之后，剩余空间被所有行平分，各行将会伸展

标准盒模型怪异盒模型弹性盒模型

longlong729的博客

06-11

242

标准盒模型 box-sizing：content-box；//标准盒模型标准盒模型总宽度=border2+padding2+content 怪异盒模型 box-sizing：border-box；//怪异模式怪异盒模型的总宽度=width+margin(左右)( width已经包含了padding和border值) 弹性盒模型 flex-direction:row //(默认)主轴为水平方向,起点在左端。 flex-direction:row-reverse //主轴为水平方向,起点在右端 fl

弹性盒模型flexbox

weixin_44509862的博客

04-09

176

通过给父级添加display: flex; 使父级变成一个弹性盒模型，以此来影响后代元素(不会影响自身) 设置过弹性盒模型的父级，其子代一般不会超出父元素的内部范围，除非被内容撑开子元素的宽高，导致无法改变子元素的大小时会超出，（注意：一串数字或一串字母写在一起会被浏览器默认为一个字符，不会默认换行）默认子元素同排显示（按主轴方向排布），当父级宽度有剩余时，子代正常显示，当子代宽度超过父级时，...

小程序学习：弹性盒子flex布局

weixin_42195593的博客

05-22

4815

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 flex容器有6个属性： flex-direction f...

flex 布局一行固定显示4个多出换行