flex布局,justify-content: space-between;解决最后一排数量不够自动向两端排列问题

2023-10-26

flex布局,justify-content: space-between;解决最后一排数量不够自动向两端排列问题

两列

/*父元素设置flex布局*/
.wrap {
    display: flex;
    justify-content: space-between;
}
/*子元素设置设置宽度50%*/
.item {
    width: 50%;
}
/*父元素设置flex布局*/
.wrap::after {
	content: "";
	flex: auto;
}

三列

 /*父元素设置flex布局*/
.wrap {
	display: flex;
	justify-content: space-between;
}
/*子元素设置设置宽度30%*/
.item {
	width: 33.33%;
}
/*父元素设置flex布局*/
.wrap::after {
	content: "";
	width:33.33%;
}

多列(5列为例子)

.md 中可以是标签样式设置图片大小, 具体方法

.wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.wrap::after {
	content: "";
	flex: auto;
}
wrap .item {
	margin: 6px;
	width: -webkit-calc((100% - 12px*5)/ 5);12px*5 //减去 12px*5 是设置的margin:6px 值,需要从子元素宽度中去除
	width: calc((100% - 12px*5)/ 5);// /5 是需要显示的列数
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

flex布局,justify-content: space-between;解决最后一排数量不够自动向两端排列问题 的相关文章

  • 使用 CSS 让图像位于文本后面并使其保持在中心位置

    我正在创建一个网页 其中有一个要放置在中心的图像 在该图像的顶部 我想要有输入框 标签和提交按钮 我正在尝试使用这个CSS img center z index 1 但这不起作用 当我将代码更改为 img center position a
  • 无需源代码即可部署网站

    我用php开发了网站 我想在没有源代码的情况下部署它 用php可以吗 我可以将网站代码转换为某种中间形式然后进行部署吗 您可以使用 Zend Guard 来编码您的代码 这样它就无法被逆向工程 http www zend com en pr
  • 重定向后 HTML5 CORS 请求在 safari 中失败

    我正在使用 jQuery 制作 CORS 请求来完成 SSO 类型系统 用户登录 WordPress 同时使用钩子也登录 Moodle 我遇到的问题是 在 Safari 中 仅限 safari 7 当初始 POST 请求设置为 mudles
  • 在 HTML5 中设置视频高度

    也许这是一个简单的问题 但它真的让我发疯 我只想设置 HTML5 视频的高度和宽度 我正在使用这段代码
  • HTML Canvas - 动态更改文本

    当我在输入文本字段中输入内容时 我试图更改 html 画布上的文本 但是 我可以添加文本 如果我删除并再次输入 新文本将添加到旧文本的顶部 JSFIDDLE https jsfiddle net bm7jv7bk 1 document ge
  • 将事件绑定到动态添加的元素

    我正在尝试使用 jquery 将函数绑定到新添加的元素 我已经尝试了很多在线示例 但不知怎的 没有任何效果对我有用 我创建了一个带有 id 和一个按钮的表单 在提交 ajax 时从另一个页面加载元素并在当前网站上插入 html 一切似乎都工
  • React Native + Redux:最好和首选的导航是什么?

    我想将 Redux 用于 React Native 目前我没有设置数据管理 所以index ios js有以下内容 renderScene route navigator this navigator navigator return
  • 提交表单而不重定向

    我想提交表单而不重定向页面 表单已提交给第三方 因此我无法在 php ini 中进行更改 我想做的是 无需访问第三方页面即可提交 成功提交后显示警报 目前我正在使用隐藏的 iframe 和表单目标来隐藏 iframe 但我不满意 有没有更好
  • 土耳其语字符显示不正确[重复]

    这个问题在这里已经有答案了 MySql 数据库使用 utf 8 编码 数据存储正确 我使用 set name utf8 查询来确保调用的数据是 utf 8 编码 只要标头字符集是 utf 8 数据库中的所有变量都可以正常工作 但静态html
  • JavaScript 相当于 jQuery 的 keyup() 和 keydown()

    我在 stackoverflow 上看到过这个链接 document ready 相当于没有 jQuery https stackoverflow com questions 799981 document ready equivalent
  • 如何在 Angular JS 应用程序中使用 ckeditor? [复制]

    这个问题在这里已经有答案了 我是 angularJS 新手 我需要在我的应用程序中使用 ckeditor 作为文本区域 在我在 Angular 应用程序上尝试之前 我已经完成了一个 仅 html 网页 我已经生成了我的 ckeditor 包
  • Bootstrap 4、导航栏固定顶部和其他粘顶元素

    这里是再现 https jsbin com lawafu edit html 输出 https jsbin com lawafu edit html output 这是一个错误吗 一个失误 一个问题 一个无法实现的想法 Before scr
  • 应该有 还是 应该有

    我正在读马克 皮尔格姆的 深入研究 HTML5 http www diveintohtml5 net semantics html 并且在语义部分 http www diveintohtml5 net semantics html new
  • 为什么 event.stopPropagation() 不会阻止

    SO 上也提出了与此类似的问题 但他们要么只关心解决其具体实现 要么没有明确提出这个问题 此外 所有答案都没有真正解决这个问题 给出以下示例 document querySelector span addEventListener clic
  • 如何使用相对路径链接到另一个本地文件?

    这是一个非常基本的 html 问题 但我似乎找不到答案 我有一个本地文件位于此处 Users Me Desktop Main June foo txt 在位于 Main 目录中的 html 文档中 我可以链接到foo txt使用完整路径的文
  • Shared Web Workers 是否会在单页重新加载、链接导航中持续存在

    共享网络工作者 http www whatwg org specs web apps current work shared workers introduction旨在允许来自同一站点 来源 的多个页面共享单个 Web Worker 但是
  • 为什么 Chrome 中存在 Document.prototype.getElementsByName?

    我所知 getElementsByName是一个定义在中的函数HTMLDocument and HTMLDocument继承自Document and Document继承自Node 那为什么我能看到Document prototype g
  • 如何从网上获取源代码?

    我正在尝试从 Web 获取 HTML 源代码 我尝试这样做 u new URL url URLConnection con u openConnection con setRequestProperty User Agent Mozilla
  • innerHTML 未写入 svg 组 Firefox 和 IE

    我正在做一个项目 遇到了障碍 在 Chrome 中 它按预期工作 但在 Firefox 和 IE 中则不然 下面的代码实际上只是真实项目代码的非常简化的版本 基本上我正在尝试替换 svg 的每组中的圆圈 因此 我从预编码的圆圈开始 然后删除
  • 使用 div 标签定位元素

    div class HeaderLink div class HeadPanelElement a href Blog a div div

随机推荐