如何让多个元素均等对齐来划分布局
时间：2023-04-02 19:00:00
HTML
如何让多个元素均等对齐？为什么会有这样的疑问？首先说明一下，本人接触前端一年，觉得静态布局没什么好担心的。果然，自负的人最容易挨耳光。刚换了一份工作，公司对前端的要求比较严格。公司采用bootstrap开发。我们都知道bootstrap框架的核心是它的网格系统。当然我很喜欢这个，但是最近UI给我的设计图总是和bootstrap矛盾。比如有这个模块，要求每个元素在移动端和屏幕之间有固定的间距，但是在响应PC端时，必须在有效宽度内对齐。这是无稽之谈。我画个图来表达一下我心中的狂躁……就是要达到下面的效果。确实不难看出，但是因为我使用了bs的grid进行布局，所以需要修改bs的padding的值，这种做法并不明智，所以思考总结了几种实现方式。这一切都非常基础。1、如何让四个没有padding和borders的元素平分？
1
2
3
4
/**如何让四个没有padding和border的元素平分？*/.box{宽度：1170px；保证金：30px自动0；边框：1px实心#00a09d；字体大小：0；}.box>div{显示：内联块；字体大小：16px；宽度：23.5%；高度：100px；背景：#ddd；文本对齐：居中；}.box>div:nth-child(n+2){margin-left:2%;}这个是最基本最简单的，不多说了，用最简单的二等分宽度实现。效果图：2.如何让带padding和border的四个元素平分？这很有趣。每次在开发过程中，只要设置了width+padding+border，问题就接二连三的来了。要么元素被挤到下一行，要么这一行的宽度没有平均分配。所以我使用了下面的几种方法。先设置基本样式：
1
2
3
4
/**如何让四个元素有无内边距和边框等分？*//*基本样式*/.div-box{width:1170px;保证金：30px自动0；边框：1px实心#000；}.div-boxdiv{宽度：150px；高度：150px；背景：#ddd；填充：15px；边框：1px实心#000；文本对齐：居中；}居中方法一：怪盒模型+二等分宽度/*居中方法一：怪盒模型+二等分宽度*/.div-box1div{box-sizing:border-box;}.div-box1{字体大小：0;}.div-box1div{显示：内联块；字体大小：16px；宽度：23.5%；}.div-box1div:nth-child(n+2){margin-left:2%;}居中方式二：浮动+奇异盒模型+二等分宽度/*居中方式二：浮动+奇异盒模型+二等分宽度*/.div-box2::after{content:"";显示：块；明确：两者；}.div-box2div{box-sizing:border-box;向左飘浮;宽度：23.5%；}.div-box2div:nth-child(n+2){margin-left:2%;三：弹性盒子（这个最好）/*居中方式三：弹性盒子（这个最好）*/.div-box3{display:flex;/*弹性方向：行；//子元素排列方向，默认为row*//*flex-wrap:nowrap;//子元素超出父级后是否换行，默认不换行，设置的宽度会失效*//*flex-flow:rownowrap//以上两个属性的Composite写法*//*子元素在父元素上的对齐方式：flex-startfrontalignment||flex-endrearalignment||center居中对齐||space-betweenandedgeno-spacingalignment||space-aroundandedgeshavespacingalignment*/证明内容：空格之间；}.div-box3>div{宽度：23%；}.div-box3>div:nth-child(n+2){左边距：2%；}居中方式四：宽度属性计算（不推荐，兼容性差）/*居中方式四：宽度属性计算（不推荐，不兼容）*/.div-box4{font-size:0;}.div-box4>div{显示：内联块；字体大小：16px；宽度：计算（23.5%-32px）；/*数学符号之间必须有空格*/}.div-box4>div:nth-child(n+2){margin-left:2%;}以上四种方式的效果都是这样的：归根结底，只有掌握最基础最底层的技术，才能更高效的完成任务，努力致富。以后我会更加努力的思考更多有用的知识。:)
