CSS3 Flexbox 项目之间的间距

2023-12-23

对于 Flexbox 来说有些陌生(尽管在 CSS 方面经验丰富),在我看来,我读过的大多数教程都方便地“掩盖”的一件事是 Flex 项目之间的间距。

例如,被引用最多的教程之一是CSS Tricks 中的这个 https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

这非常好并且很有帮助,像这样的图表让我很困惑:

注意弹性项目之间的空格。尽管没有在任何地方提到,也没有在示例代码中提及,但似乎获得空格的唯一方法是使用 css 边距。

正确,还是我在这里遗漏了一些重要的东西?

Because what i need to create is this, a lot like the "center" demo above: enter image description here

However, when I try it myself, I of course get this: enter image description here

if I use space-around, I get this instead. Huge space. enter image description here

因此,我似乎需要向前 2 个框添加 margin-right,以获得 3 个居中的框,它们之间有一个小间隙。

这对于 Flexbox 来说是一个糟糕的用例吗?因为我认为使用 Flexbox 创建 3 个盒子比使用简单的边距和居中几乎没有什么优势。

我在这里遗漏了一些明显的东西吗?


不 - 你没有错过任何东西。 Flexbox 非常适合对元素进行排序并定义这些元素沿主轴或交叉轴的总体对齐方式,但不能直接说明单个项目的间距。,你会注意到他们使用:

margin-top: 10px

定义元素间距。希望这可以帮助!

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

CSS3 Flexbox 项目之间的间距 的相关文章

  • popstate - 需要单击两次后退按钮才能真正返回

    我正在创建一个单页面并使用 PushState 来更改地址 现在 如果我向后推 则会触发 popstate 并且我想要使页面以动画方式从当前位置滚动到最后一个位置 当然 这是可行的 但页面会跳转到顶部 有谁知道如何防止这种行为 我正在使用
  • 使用 jQuery 更改 CSS 类属性

    有没有办法使用 jQuery 更改 CSS 类的属性 而不是元素属性 这是一个实际的例子 我有一个 div 类red red background red 我想转班级red背景属性 而不是具有类的元素red分配的背景 如果我用 jQuery
  • 在Android中将半径边框绘制到imageview或textview的一个角落

    我需要在我的应用程序中为图像视图或文本视图绘制边框 但我只需要在一个角落绘制它 就像图像一样 我做了一个形状 但我在所有 4 个边上都有边框
  • Android浏览器上的Web应用程序宽度问题

    所以到目前为止我只在 Android 浏览器上遇到过这个问题 基本上我的网站几乎一直运行良好 而且我还没有在 Dolphin Opera 或 Skyfire 上看到这个问题 但偶尔当我从手机主屏幕之一上的书签重新打开 Android 浏览器
  • 如何检测被覆盖的 CSS 属性?

    I can get all css properties for an element with document stylesheets but some of those are not active because those pro
  • 在具有子项的“contenteditable”div 中设置插入符位置

    我有一个这样的 HTML 结构 div This is some plain boring content div 我还有这个函数 允许我将插入符位置设置到 div 中我想要的任何位置 Move caret to a specific po
  • CSS 未在 Django 项目中加载?

    我是 Django 新手 但负责该项目的前端工作 我一直在研究如何准确加载 css 文件 但我发现这些方法不起作用 这是 html 文件布局 load static
  • 推文按钮不出现

    我正在尝试向 html 页面添加一个 tweet 按钮 我使用 Twitter 按钮生成器中的官方代码 http twitter com about resources buttons tweet http twitter com abou
  • HTML 和 标签有什么区别?

    HEAD 标签和 BODY 标签有什么区别 大多数 HTML 书籍仅 简短 提及 and 标签 但它们消失得很快 它们会影响浏览器呈现网页的方式吗 另外 它们会影响 javascript 的运行顺序吗 我的意思是 如果我里面有一个javas
  • 网格布局:创建 CSS,以便元素在调整相邻元素大小时保持位置

    我想在网格布局中构建一个简单的图像库 并且我正在使用类似的东西悬停时缩放 http www javascript fx com navigation imagezoom general help help html缩放悬停图像 但我宁愿使用
  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项?

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这
  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog
  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 如果选中复选框则显示 div

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它
  • 使用 File API polyfill 读取数据 URL

    我正在尝试使用文件 API 库 https github com mailru FileAPI https github com mailru FileAPI 作为不支持文件 API 的浏览器的后备 以便将文件作为数据 URL 读取并将其传
  • Jquery 以编程方式更改

    文本

    编辑 解决方案是将其添加到个人资料页面而不是性别页面 profile live pageinit function event p pTest text localStorage getItem gender 我在列表视图中有一个带有一些文
  • 使用溢出支持定位粘性填充材料[重复]

    这个问题在这里已经有答案了 我在用position sticky在我的应用程序中 在使用overflow属性来显示滚动条 我已经寻找了一个确实支持这种情况的polyfill 但到目前为止没有任何运气 有谁知道这样的polyfill shim
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum

随机推荐

  • 通过 AWS SDK 对 SQS 的访问被拒绝

    我目前正在开发一个使用 Symfony2 开发的网站 我需要在 Amazon SQS 中发送消息 为了做到这一点 我添加到我的composer json aws aws sdk php 2 4 然后 当我尝试创建队列或列出队列时 出现 40
  • Bitnami GitLab 5.2.0:gitlab_sidekiq 未运行且无法启动

    我们正在使用Bitnami GitLab 5 2 0 http bitnami com stack gitlab README txt 我们偶然发现我们无法推送到新的存储库 例如 email protected cdn cgi l emai
  • 不使用 jQuery 选择元素

    我猜这会被否决 因为它没有包含足够的 jQuery 但它就在这里 What is the most effective way to get the element s returned by the jQuery selector bel
  • 使用 magento api 构建电子商务网站

    我是 magento 的初学者 正在使用 magento 创建一个网站 我注意到 magento 有大量 api 它们公开了我创建电子商务网站所需的所有功能 所以 我想使用magento的api来获取数据 但单独开发UI而不依赖于magen
  • 调整 GridView 项目大小以填充 GridView?

    我有这个问题的反面 如何动态调整 GridView 项目的大小 https stackoverflow com questions 13254107 how do i dynamically size a gridview item 我有一
  • 如何将按钮内的图标和文本居中?

    如何将按钮内的图标和文本居中而不指定对齐项目的尺寸 ico background url https www gravatar com avatar cbfaff96665b7567defe1b34a883db8b s 32 d ident
  • Jacoco Maven 多模块项目覆盖

    似乎有几个问题 这些问题已经很老了 并且 Jacoco 的 Java 8 支持发生了变化 我的项目包含以下结构 pom xml sub module A pom xml sub module B pom xml sub module C p
  • 由于删除运算符会释放内存,为什么需要析构函数?

    来自 C 常见问题解答 http www parashift com c faq lite dtors html faq 11 9 http www parashift com c faq lite dtors html faq 11 9
  • 如何在流数据帧上应用滞后函数?

    我有一个具有三列 time col1 col2 的流数据帧 我必须在第 2 列上应用滞后函数 我尝试过以下查询 val w org apache spark sql expressions Window oderBy time df sel
  • Kubernetes部署内存占用高

    我在 GKE 容器中使用 python Flask 并且 pod 内的内存正在增加 我对 pod 设置了限制 但它被杀死了 我想这是内存泄漏 有人可以在看完这个后提出一些建议 随着磁盘的增加 内存也会增加 并且也会出现一些页面错误 有没有容
  • 自动指针的优点/缺点

    与普通指针相比 使用自动指针 auto ptr 有哪些优点和缺点 我听说它会自动释放内存 但为什么不经常使用呢 主要缺点是std auto ptr是它有所有权转让语义 这使得它无法存储std auto ptr在 STL 容器中 因为当您存储
  • Android 在上传到市场时隐藏应用程序中的日志

    我的应用程序有很多 Log i 添加用于调试的语句 现在如果需要将这样的应用程序上传到市场 是否应该删除这些日志 如果是 是否有比手动删除更简单的方法 如果不删除 如果用户从市场安装应用程序后运行应用程序 是否会出现这些日志 我尝试查看某些
  • 在 MP3 ID3v2 标签中设置歌词

    我想在 Android 应用程序中将歌词写入 mp3 我找到了一个用于读取的 java 库mp3文件并读取 操作 ID3 标签 ID3v1 和 ID3v2 2 到 ID3v2 4 名为mp3agic https github com mpa
  • 颤动曲线条

    我想知道是否有更好的解决方案来制作如下图所示的弯曲条 这是我的颤振代码 import package flutter web material dart class CurvedBar extends StatelessWidget con
  • 如何用我自己的 4x4 矩阵更新 opengl modelview 矩阵?

    我有 4x4 矩阵用于对象的变换 float mat44 16 但我不知道如何使用我的矩阵更新 OpenGL ModelView 矩阵 我应该使用 glTranslatef glRotatef 与矩阵中的相关值还是应该使用 glLoadMa
  • 初学者无法创建第一个 Android 应用程序项目

    我已将 ADT 捆绑包 内部版本 v22 0 1 685705 下载到我的 Macbook Pro OS X 10 8 4 上 并根据 Android 开发人员说明进行安装 6 月 19 日星期三 当我尝试使用所有默认设置创建新的应用程序项
  • 以编程方式创建并显示 UIPickerView

    我试图以编程方式创建 UIPickerView 并将其显示为文本字段的第一个响应者 但是 选择器视图没有显示 textField 连接到界面生成器中的对象 但 pickerView 是以编程方式创建的 class View UIViewCo
  • 单个整数的 Web API 响应类型

    调用仅返回单个整数的 Web API REST 服务的 正确 方法是什么 我对 XML JSON 或其他任何内容没有任何要求 对服务的调用只需要返回一个整数 我是否使用ResponseType属性在这里 我的服务返回类型为HttpRespo
  • 为什么 JTable 列中没有显示动画 .gif 图标?

    Here is the processing gif Here is initial png Here is the output 这是代码 processing gif 正在其他位置工作 例如在某个选项卡中JTabbedPane 这里在a
  • CSS3 Flexbox 项目之间的间距

    对于 Flexbox 来说有些陌生 尽管在 CSS 方面经验丰富 在我看来 我读过的大多数教程都方便地 掩盖 的一件事是 Flex 项目之间的间距 例如 被引用最多的教程之一是CSS Tricks 中的这个 https css tricks