程序员经验分享-hwhale

CSS3 Flexbox 布局一行最多 3 个子项目

2024-01-22

在将下一个子元素推入新行之前，CSS 中是否有一种简单的方法可以在同一行上拥有固定的最大子项数？

据我了解 Flexbox，如果子项目在其上方的行上没有足够的可用空间，则只会将其推入新行。但我正在寻找一个 CSS 规则或函数，让我说“我希望任何给定行上最多有 3 个子项目，即使有空间可容纳第 4 个子项目，也将其推到新行".


使用弹性基础。

.child {
flex-basis: 33%;
}

该百分比必须根据您的盒子大小模型以及边距和/或填充的使用进行调整。

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

html

css

flexbox

CSS3 Flexbox 布局一行最多 3 个子项目 的相关文章

随机推荐

  • Visual Studio 2010 Premium 是否包含合同工具？

    根据这个特征矩阵 http www microsoft com visualstudio en us products 2010 default mspx compare Visual Studio 2010 Premium RC 包含 静

  • 如何解释 MySQL EXPLAIN 的输出？

    我想选择栏目内容text from entrytable EXPLAIN SELECT text FROM entrytable WHERE user username status 1 status spam user no spam s

  • 基于电子应用程序的类似于 Wiki 的表格排序

    我正在写一个插件Obsidian https obsidian md 使用他们的API https github com obsidianmd obsidian api 希望能达到类似于 wiki 的表格排序 https en wikipe

  • 允许共享起始/结束顶点的定向最大加权二分匹配

    令 G U u V E 为加权有向二分图 即 U 和 V 是二分图的两组节点 E 包含从 U 到 V 或从 V 到 U 的有向加权边 这是一个例子 在这种情况下 U A B C V D E F E A gt E 7 B gt D 1 C g

  • 无法在 Jest 中创建自定义测试环境

    我正在尝试使用 Jest 创建一个自定义测试环境 如其官方所述docs https jestjs io docs en configuration testenvironment string不幸的是我收到以下错误 确定要运行的测试套件 验

  • 如何在数组中查找对象并在 React 组件中显示它？

    我有数组cities与这样的对象 id 1 name New York id 2 name London 我的值为id 我将数组中的元素 名称 放入选择列表 但我需要添加第一个选项 其中包含数组 名称 中的值 该选项具有相应的 id 但我无

  • 带 Cron 作业的 Laravel 调度程序

    我正在使用 laravel 5 1 和 php5 我尝试创建我的 cron 作业来及时删除未付发票 但我测试它以打印用户日志以帮助我知道该作业正在运行 这是我的应用程序 Console Kernel php protected comman

  • 从 PNG 图像或 Java 面板创建 PDF

    我正在寻找一个可以获取图像 PNG 并创建 PDF 的 Java 库 或者直接从已绘制的java面板创建PDF 您可以使用 Gnostice PDFOne for Java 来实现此目的 http www gnostice com PDFO

  • System.IO.Directory.CreateDirectory 仅具有当前用户的权限？

    我希望 asp 应用程序创建一个只能访问该应用程序运行所用的帐户 即 asp 帐户 的文件夹 我其实想用this one http msdn microsoft com en us library 9h4z99zb aspx 但我不知道如何

  • 根据显示的片段替换工具栏布局

    我有一个带有导航抽屉的活动 它替换了活动上的 main fragment container 当显示其中一个片段时 我想更改工具栏的布局并向其添加一个微调器 并在片段隐藏时将其删除 我的布局看起来像这样

  • 如何保持变量和包含它的字典一致？

    我有一个变量 self foo 1 还有一本字典 self foo dict foo key self foo 我希望能够改变self foo并让它也改变self foo dict 如果这是在 C 中 并且字典是一个结构 我只会使用指针 有

  • 当缓冲区中有几个文件退出时 vim 崩溃

    我识别具有某些特征的文件并将它们拍摄到 vim 会话中 例如 grep rl a z xargs vim 除了警告之外 这有效 我在 vim 中打开了 7 个文件 一一编辑它们 使用 w等结束了 bn用于转到下一个文件 在我的会议结束时我做

  • 如何将 PowerShell 树输出到文本或 Excel 文件

    我有以下代码 readPath C FirstFolder writePath C SecondFolder Function Recurse folder lvl Get ChildItem Path folder File ForEac

  • 即使我关闭应用程序，我的 Android 应用程序中的背景音乐服务也会继续播放

    我正在使用后台服务在我的应用程序的所有活动中运行背景音乐 问题是 当应用程序运行时 它工作正常 但当我关闭它时 它会继续播放音乐 直到我从设备上卸载它 您认为这里的问题是什么 这是我的后台服务中的代码 Created by Naira on

  • ASP.NET 应用程序 - 设置 IE7 兼容模式？

    在 ASP NET 应用程序中设置 IE7 兼容模式来处理 IE8 问题的最简单方法是什么 是否可以通过 web config 进行设置 还是必须在 IIS 或页面级别进行设置 添加标题 X UA Compatible IE Emulate

  • 如何制作像 Stackoverflow 中那样的投票赞成或反对按钮？

    Problems 如何制作一个 Ajax 按钮 向上和向下箭头 使得数字可以增加或减少 如何将用户的操作保存到变量 Number Of Votes Of QuestionID 我不确定是否应该使用数据库作为变量 不过 我知道还有一种更简单的

  • 使用 php 创建 3 位毫秒

    我有 13 位数字 想要创建包含毫秒的日期和时间 示例代码是这样的这是我的 php 脚本 mil 1328910295939 seconds mil 1000 showdate date Y m d H i s seconds echo s

  • 通过 itext pdf 库进行图像旋转

    我无法通过在java程序中使用itext pdf库从中心或任何固定点旋转图像 当我旋转图像时 它的x和y坐标会发生变化 请在这方面帮助我 Image pdfImage Image getInstance assets product png

  • 通过 JDBC 显示多列索引的列名

    有谁知道如何获取跨多个列的索引的列名 请参阅SQL via JDBC 我确实知道如何获取所有索引列 请参阅代码 但这样我就无法看到哪些列链接到单个索引 CREATE TABLE IF NOT EXISTS foo id int 11 NOT

  • CSS3 Flexbox 布局一行最多 3 个子项目

    在将下一个子元素推入新行之前 CSS 中是否有一种简单的方法可以在同一行上拥有固定的最大子项数 据我了解 Flexbox 如果子项目在其上方的行上没有足够的可用空间 则只会将其推入新行 但我正在寻找一个 CSS 规则或函数 让我说 我希望任

热门标签