程序员经验分享-hwhale

flex布局换行后元素不足一行怎样均匀分布

2023-11-10 
<view class="jing-box">
				<view class="jing-xiangqing01">
					<view class="green-circular" style="background: #5AC725;"></view>
					<view>井12-238</view>
				</view>
				<view class="jing-xiangqing01">
					<view class="orange-circular" style="background: #F9AE3D;"></view>
					<view>井12-238</view>
				</view>
				<view class="jing-xiangqing01">
					<view class="red-circular" style="background: #F56C6C;"></view>
					<view>井12-238</view>
				</view>
				<view class="jing-xiangqing02">
					<view class="red-circular" style="background: #F56C6C;"></view>
					<view>井12-238</view>
				</view>
				<view class="jing-xiangqing01">
					<view class="green-circular" style="background: #5AC725;"></view>
					<view>井12-238</view>
				</view>
			</view>
.jing-box{
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between;
}
.jing-box:after {
    display:block;
    content:"";
    width: 30%;
	height:0px;
}
.jing-xiangqing01{
	display: flex; 
	align-items: center; 
	padding: 16rpx 0; 
	border: 1rpx solid #C4C6C9;
	border-radius: 14rpx; 
	margin-top: 19rpx; 
	width:30%;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

前端

flex布局换行后元素不足一行怎样均匀分布 的相关文章

  • 使用 Javascript 删除 HTML 表格行

    我正在使用下面的代码使用 javascript 删除 HTML 表行 但它给了我错误 使用下面的代码 我在运行时使用 javascript 创建一个列 其中包含删除锚标记 var tbody document getElementById

  • 一行中单独一个元素的选择器？ [复制]

    这个问题在这里已经有答案了 我们有带有 2 个子元素的 Flex 容器 当我们调整窗口大小并且其中一个弹性项目换行时 每个元素都位于其自己的行上 有没有像这样的选择器 when alone in row flex parent flex f

  • 尝试使用 Excel 中的 VBA 从网页中提取一个值

    我几天来一直在尝试查找信息 但是我找到的所有示例都只有一小段代码 我需要全部 我想要做的是从主页中提取一个值并将其放入 Excel 的单元格中 然后从同一站点上的另一个页面获取另一个值并放入下一个单元格等 该页面是瑞典证券交易所页面 我用作

  • 缩小 HTML、CSS 和 Javascript 是一个坏主意吗？

    维基百科定义缩小 http en wikipedia org wiki Minification 28programming 29 as 从源代码中删除所有不必要的字符而不改变其功能的过程 这些不必要的字符通常包括空格字符 换行符 注释 有

  • 如何更改 Bootstrap 导航栏折叠断点

    目前 当浏览器宽度低于 768px 时 导航栏将更改为折叠模式 我想将此宽度更改为 1000px 这样当浏览器低于 1000px 时 导航栏就会更改为折叠模式 我想在不使用 LESS 的情况下执行此操作 我使用的是手写笔而不是 LESS 我

  • 使用渐变填充而不是普通颜色创建标记 - Google 地图

    我正在尝试使用 Google 地图获得一个点状标记google maps SymbolPath CIRCLE 我在其中取得了成功 var dotMarkerImage path google maps SymbolPath CIRCLE f

  • 使用 bootstrap 将并排的网格位置交换到顶部和底部

    我有两个 div 内容和图像 它们在中等屏幕中并排放置 col md 6 内容 col md 4 图片 因此 当屏幕尺寸更改为小屏幕和 xs 屏幕时 这些 div 不应该并排放置 它们应该像这样顶部和底部对齐 image content 这

  • 设置列表中前 10 项的样式

    可以使用像 li nth child 这样的东西来设置列表中前十项的样式吗 ol li item 1 li li item 2 li li item 3 li li item 4 li li item 5 li li item 6 li l

  • zone.js：140未捕获类型错误：无法读取属性“删除”

    我是 kendo ui 的新手 我在小提琴中开发了原型 删除确认窗口在那里工作正常 但是当我集成到我的代码库中时 我收到错误 Cannot read property remove at the line pai to delete rem

  • 如何左对齐这些 Bootstrap 表单项？

    我是第一次使用 Bootstrap 在将此表单水平向左对齐时遇到很多麻烦 列表项是水平的 因为它们应该是水平的 但我希望控制标签 表单标签的 Bootstrap 类 全部位于向左浮动的相同位置 该表单包含在跨度为 7 的 div 中 因为我

  • 图表.js.如何更改“标签”数组的字体样式？

    我从 Chart JS 库中获取了一个图表 截屏 https i stack imgur com DnuRq png var ctx document getElementById myChart var data labels HTML

  • 将多个 CSS 文件连接成一个

    将多个 CSS 文件连接成一个 CSS 文件的最佳方法是什么 我想减少以下 进入 简单地做cat css css gt css 1 3

  • 如何默认或通过 CSS 将详细信息元素设置为 OPEN

    HTML5 添加了两个新元素 可用于标记文章的目录 details and summary 详细信息元素默认为关闭状态 隐藏除摘要元素之外的所有内容 单击时 它会展开以显示其内容 当它执行此操作时 它会向详细信息元素添加一个 open 属性

  • 平均分配固定大小容器的空间。 Flexbox 的案例？

    如何设计 HTML CSS 结构 将固定大小的容器水平分成三部分 第一部分的高度应与其内容需求一样高 第二部分和第三部分将共享剩余的空间五五十 无论它们的内容如何 如果其内容的大小超过此限制 则该部分应该是可滚动的 它的 HTML 部分很简

  • 如何使用 Spring Boot 传输音频

    我想让用户能够播放声音 我的实现在 Firefox 上运行良好 在 Safari 上 不播放声音 我验证了音频控制可以在 Safari 中与其他网站一起使用 所以 我认为我必须更改控制器中的某些内容 控制器 RequestMapping v

  • iPhone 上的锁定方向 UIWebView

    有没有办法锁定 UIWebView 的方向 使用 Obj C JS 还是 Html 我不想有按钮或任何东西 我只想在应用程序打开时将其锁定为纵向 好像这个堆栈溢出帖子 https stackoverflow com questions 43

  • 为什么我无法对自定义属性（又名 CSS 变量）进行动画处理？

    看这个动画 金色 div 有一个自定义属性动画的动画 keyframes roll o 1动画 o 这是分步动画的 银色 div 有一个动画 其中normal属性是动画的 keyframes roll o 2动画left 这会持续动画 为什

  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome

  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49

  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么

随机推荐

热门标签