flex布局优化(两端对齐,从左至右)

这篇具有很好参考价值的文章主要介绍了flex布局优化(两端对齐,从左至右)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

flex布局是前端常用的布局方式之一,但在使用过程中,我们总是感觉不太方便,因为日常开发中,大多数时候,我们想要的效果是这样的

flex布局两端对齐,css,flex,css,前端
即左右两端对齐并顶满,小盒子左右间距一致,并且从左至右排布。
今天主要就来讨论,通过css,有几种方式来实现,以及它们的优缺点。

方式一 nth-child

<template>
  <div class="main">
	<div class="flex-box">
		<div class="item-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 = 100
	margin-bottom: 20px; // 行与行之间也要设置边距。
}

// 如果一行是5个就是 5 + 5n
.item-box:nth-child(4 + 4n) {
	// 当n为0时,即表示第一行最后一个元素,不需要右外边距,否则就超出 100%了。
	margin-right: 0 !important;
}

优点:实现了我们想要的布局方案,代码量也并不复杂,基本没有兼容性的问题。

缺点1:当遇到下面这种情况时,该设置将会失效。

<template>
  <div class="main">
	<div class="flex-box">
		<div class="item-box">...</div>
		<div class="item-box" style="display:none;"></div>
	</div>	
  </div>
</template>

flex布局两端对齐,css,flex,css,前端
这是因为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 = 100
		margin-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;不会造成影响。

缺点1:gap目前还是一个很新的属性,对浏览器的兼容性并不高,尤其是不兼容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,并且不存在display:none;时的问题。
缺点1:代码略微有些复杂,需要合理安排盒子宽度和间距的宽度,与前面的两种方式不同间距数量和盒子数量一致。需要分别设置左边距和右边距。

缺点2:需要对不同分辨率的设配,额外多写一套代码。

方式四 在最后面添加超过一行数量的空标签

<template>
  <div class="main">
	<div class="flex-box">
		<div class="item-box">...</div>
		...
		<div class="item-empty"></div>
		<div class="item-empty"></div>
		<div class="item-empty"></div>
		<div class="item-empty"></div>
	</div>	
  </div>
</template>

如上代码所示,我打算弄一行四列,所以我在最后面加了四个空标签

.flex-box {
	display: flex; // 设置成为flex模式
    flex-wrap: wrap; // 允许换行
    justify-content: space-between; // 为了让两边对齐
}

.item-box {
	width: 22%; // 以4个一行为例,有4个子盒子,只要五个盒子加起来超过100%,能换行就行
	margin-bottom: 20px; // 行与行之间也要设置边距。
}

.item-empty {
	width: 22%; // empty保持跟真实的item一样的宽度
	height: 1px; // 高度可以给一点,如果0px也行,那就0px
}

这种方式也有缺点,就是必须得渲染empty dom,但这点缺点跟实际使用的感觉比较起来,也可以忽略不计。

总结

四种方式中,第四种最简单,第二种方式比较简单简单,但兼容性有限;第一种方式代码量不少,兼容性适中,而且display:none;的问题严重,最后一种方式,最推荐,虽然有一些计算,并且也要合理分配宽度,但其兼容性最好,基本没啥场景不能适用,正所谓一招鲜,吃遍天。

至于缺点2,面对不同分辨率,每行数量会变化的问题,目前没有特别好的解决方案,都需要额外一套样式代码才能解决。

当然,你可以通过使用scss或者less,弄一个for循环,从一行2个到 10个 进行样式的封装,这样使用的时候,直接使用类名即可,比如 flex-row-6,flex-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;
    }
  }
}

好了,以上就是这个问题的全部内容了,你可以根据实际情况选择一种解决方案。都看到这儿了,点赞,关注,收藏来一波吧。
flex布局两端对齐,css,flex,css,前端文章来源地址https://www.toymoban.com/news/detail-792060.html

到了这里,关于flex布局优化(两端对齐,从左至右)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flex布局最后一行列表左对齐的方法

    使用flex布局两端对齐,但是最后一行元素居中会很丑,所以可以让最后一行元素左对齐,方法如下: 改之前: html:  css: 只需要添加几行代码:其中的数字取决于你的列表每行有几个元素,以我的为例(宽度是百分比),每行有五个元素,最后剩下的一行可能是4个、3个、2个。

    2024年02月11日
    浏览(37)
  • flex布局瀑布流占位两边对齐不对称

    2024年02月11日
    浏览(38)
  • CSS Flex布局

    Flex布局(弹性盒子布局) 是一种用于在容器中进行灵活和自适应布局的CSS布局模型。通过使用Flex布局,可以更方便地实现各种不同尺寸和比例的布局,使元素在容器内自动调整空间分配。 目录 容器属性 🍁display属性 🍁flex-direction属性 🍁flex-wrap属性 🍁flex-flow属性 🍁jus

    2024年02月10日
    浏览(52)
  • CSS---flex布局

    主要记录flex布局的要点以及实例 flex包含6个属性,分别为:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。 row表示按照行正序排列 row-reverse表示按照行反序排列 column表示按照列正序排列 column-reverse表示按照列反序排列 nowrap为默认值,默认不换行 wrap表示

    2024年02月09日
    浏览(44)
  • CSS-Flex布局

    Flex布局是一种弹性盒子布局,适用于构建响应式的页面布局 Flex布局是一种弹性盒子布局,适用于构建响应式的页面布局。以下是一些Flex布局的技巧: 使用flex属性设置弹性容器的布局方式,常见的取值有row(水平排列)、column(垂直排列)、row-reverse和column-reverse等。 例如

    2024年01月16日
    浏览(42)
  • 【CSS】flex布局用法解析,快速上手flex布局,flex:1是什么意思?肯定看的懂好吧?

    flex 是 flexible box 的缩写,意为\\\"弹性布局\\\",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 flex 布局。 采用 flex 布局的元素,称为 flex 容器(flex container),简称\\\"容器\\\"。 flex-direction 属性决定主轴的方向(也就是元素的排列方向),与主轴垂直的轴是交叉轴。

    2024年02月03日
    浏览(50)
  • 前端知识——css 之 flex 布局

    🔥🔥🔥更多知识,欢迎访问我的个人博客:Nan-ying’s Blog 长久以来,CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning 。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举。 一些布局上的痛点无法解决: 比如在父内容里面垂直居

    2024年02月07日
    浏览(51)
  • CSS 用 flex 布局绘制骰子

         

    2024年03月10日
    浏览(43)
  • CSS-flex布局详细讲解:

    一、flex布局体验 传统布局与flex弹性布局的区别: 传统布局: ·兼容性好 ·布局繁琐 ·局限性,不能再移动端很好的布局 flex弹性布局: ·操作方便,布局极为简单,移动端应用很广泛 ·PC端支持情况不好 ·IE11或更低版本仅部分支持或者不支持 建议:1、如果是PC端布局,更多

    2024年02月11日
    浏览(82)
  • css3 flex弹性布局详解

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写,意为\\\"弹性布局\\\",用来为盒状模型提供最大的灵活性。 开启flex布局:

    2024年02月05日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包