廉江手机网站建设,用花生壳免费域名做公司网站,一般做一个网站专题页多少钱,咔咔做受视频网站文章目录前言方式一 nth-child方式二 gap属性方式三 设置margin左右两边为负值总结前言
flex布局是前端常用的布局方式之一#xff0c;但在使用过程中#xff0c;我们总是感觉不太方便#xff0c;因为日常开发中#xff0c;大多数时候#xff0c;我们想要的效果是这样的 …
文章目录前言方式一 nth-child方式二 gap属性方式三 设置margin左右两边为负值总结前言
flex布局是前端常用的布局方式之一但在使用过程中我们总是感觉不太方便因为日常开发中大多数时候我们想要的效果是这样的 即左右两端对齐并顶满小盒子左右间距一致并且从左至右排布。 今天主要就来讨论通过css有几种方式来实现以及它们的优缺点。
方式一 nth-child
templatediv classmaindiv classflex-boxdiv classitem-box.../div.../div /div
/template.flex-box {display: flex; // 设置成为flex模式flex-wrap: wrap; // 允许换行
}.item-box {width: 22%; // 以4个一行为例有4个子盒子3个间距margin-right: 4%; // 3 * 4 4 * 22 100margin-bottom: 20px; // 行与行之间也要设置边距。
}// 如果一行是5个就是 5 5n
.item-box:nth-child(4 4n) {// 当n为0时即表示第一行最后一个元素不需要右外边距否则就超出 100%了。margin-right: 0 !important;
}优点实现了我们想要的布局方案代码量也并不复杂基本没有兼容性的问题。
缺点1当遇到下面这种情况时该设置将会失效。
templatediv classmaindiv classflex-boxdiv classitem-box.../divdiv classitem-box styledisplay:none;/div/div /div
/template这是因为nth-child是按照子盒子的个数来设置的虽然其中一部分子盒子消失了但它的元素依然存在个数并没有变。
缺点2: 不够灵活如果在不同屏幕分辨率下每行个数不一样(做响应式的时候经常会遇见这种情况)需要在不同分辨率下多写一套样式代码。 media screen and (max-width: 991px) {.flex-box {display: flex; // 设置成为flex模式flex-wrap: wrap; // 允许换行}.item-box {width: 48%; // 以2个一行为例有2个子盒子1个间距margin-right: 4%; // 1 * 4 2 * 48 100margin-bottom: 20px; // 行与行之间也要设置边距。}// 如果一行是2个就是 2 2n.item-box:nth-child(2 2n) {// 当n为0时即表示第一行最后一个元素不需要右外边距否则就超出 100%了。margin-right: 0 !important;}}方式二 gap属性
.flex-box {display: flex; // 设置成为flex模式flex-wrap: wrap; // 允许换行gap: 4%; // 设置间距为4%
}.item-box {width: 22%; // 以4个一行为例有4个子盒子3个间距 margin-bottom: 20px; // 行与行之间也要设置边距。
}优点 显而易见这种方式的代码量更少更方便并且不存在方式一的缺点1即display:none;不会造成影响。
缺点1gap目前还是一个很新的属性对浏览器的兼容性并不高尤其是不兼容ie11如果项目对浏览器没有兼容性要求可以使用gap当然也可以换一种布局方式display:grid;
缺点2当然这种方式也需要对不同分辨率的设配额外多写一套代码但相对来说也轻松许多。
方式三 设置margin左右两边为负值
.flex-box {display: flex; // 设置成为flex模式flex-wrap: wrap; // 允许换行margin: 0 -2% 0 -2% // 间距为4%
}.item-box {width: 21%; // 以4个一行为例有4个子盒子4个间距 4 * 21 4 * 4 100 margin: 0 2% 20px 2%; // 左右两边各2%所以间距为4%
}优点兼容性很好能够兼容ie11并且不存在displaynone;时的问题。 缺点1代码略微有些复杂需要合理安排盒子宽度和间距的宽度与前面的两种方式不同间距数量和盒子数量一致。需要分别设置左边距和右边距。
缺点2需要对不同分辨率的设配额外多写一套代码。
总结
三种方式中第二种方式最简单但兼容性有限第一种方式代码量不少兼容性适中而且display:none的问题严重最后一种方式最推荐虽然有一些计算并且也要合理分配宽度但其兼容性最好基本没啥场景不能适用正所谓一招鲜吃遍天。
至于缺点2面对不同分辨率每行数量会变化的问题目前没有特别好的解决方案都需要额外一套样式代码才能解决。
当然你可以通过使用scss或者less弄一个for循环从一行2个到 10个 进行样式的封装这样使用的时候直接使用类名即可比如 flex-row-6flex-row-4等。
for $i from 2 through 10 {.flex-row-#{$i} {display: flex;flex-wrap: wrap;.item {width: calc(96% / #{$i}) !important;margin-right: calc(4% / #{$i - 1}) !important;margin-bottom: 20px;}.item:nth-child(#{$i}n #{$i}) {margin-right: 0 !important;}}
}
