如何在Flexbox项之间添加“|”
Flexbox 是一种用于构建灵活的、响应式的网页布局的 CSS 布局模型。它允许开发者轻松地控制项目（也称为 Flex 项）在容器（也称为 Flex 容器）中的位置和大小。
要在 Flexbox 项之间添加“|分隔符，可以使用伪元素和伪类来实现。下面是一个示例代码：
HTML 结构：
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>CSS 样式：
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-item {
position: relative;
padding: 0 10px;
}
.flex-item:not(:last-child)::after {
content: "|";
position: absolute;
right: -5px;
}这段代码会创建一个 Flex 容器，并将其子项水平排列，项目之间均匀分布。通过为每个项目的伪元素 ::after 添加一个 "|" 内容，并将其定位到项目的右侧，我们就可以在 Flexbox 项之间添加分隔符。
注意，这只是一个示例，实际情况下你可能需要根据具体需求调整样式和布局。
腾讯云提供了云计算相关产品，如云服务器、容器服务、云数据库等。你可以在腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息。
相关·内容
我正在使用带有headerContent的ObjectPageLayout，我想使用justifyContent，这样它在headerContent中的项之间就会有空间，但它不会工作。这只能在headerContent中工作，我如何在headerContent中做类似的事情？<FlexBox justifyContent="SpaceBetween">Accept&quo
浏览 0提问于2019-05-13得票数 0
postcss' 安装的React FlexBox-网格使用以下npm命令安装了以下依赖项它的接缝反应-FlexBox-网格不是由网络包加载器选择的。我在这里的问题是如何向现有的css加载程序配置中添加React FlexBox-Grid。从React FlexBox-Grid文档中，建议了两个设置，我不知道如何
浏览 0提问于2016-12-21得票数 0
回答已采纳
1回答
我需要在容器中间，而不是在start div和end div之间的空间中间对徽标进行居中。有没有办法用柔性盒来做呢？下面是以两个div之间的中间空间为中心的徽标快照：我的代码：/* =======Header Start======= */ display: flex
浏览 0提问于2018-07-19得票数 0
回答已采纳
3回答
作为Flexbox的新手(虽然在CSS中有经验)，在我看来，我读过的大多数教程都很方便地“忽略”了一件事，那就是flex项之间的间距。
请注意flex项之间的空格。尽管在任何地方都没有提到，在示例代码中也没有提到，但似乎获得空格的唯一方法是使用css页边距。因此，我似乎需要在前2个框中添加边距-右侧，以获得3个居中的框，它们之间有一个小间隙。
这仅仅是Flexbox</e
浏览 1提问于2015-06-13得票数 22
回答已采纳
2回答
火狐已经实现了flexbox布局的，而其他浏览器，如Chrome，只支持网格布局的gap。如果您在flexbox容器上添加gap，这会导致不同浏览器之间的差异。那么如何测试flexbox对gap的支持呢？<div>Item One</div></section>
请注意:即使我使用@supports grid-gap而不是gap，火狐仍然会将间隙应用于<
浏览 1提问于2019-03-28得票数 15
考虑到IE不完全支持网格布局，我只对使用Flexbox，对其他浏览器使用Grid布局。
是否有一种方法只向IE上的flex项添加页边距/填充，并且不影响网格布局项？现在，在flexbox项之间没有空间--我知道通常您会在".grid文章“中添加页边距或填充，但在这种情况下，b/c不起作用，因为B/C也会为网格项添加页边距或填充(例如，在Chrome中的网格布局中).grid {
浏览 3提问于2020-10-11得票数 0
回答已采纳
2回答
<div class="flexbox-parent"> Header <div class="fill-area-content flexbox-it
浏览 6提问于2016-05-09得票数 4
回答已采纳
我需要将SVG元素的顶部和底部与FlexBox项重叠，这样它们之间的空间就会消失。
// Lottie returns an SVG with class wrapper.opacity: 0; 100% {
浏览 1提问于2019-01-11得票数 0
7回答
这就是我想要的：在flexbox项目上应用边距，然后从第一个和最后一个子项中删除其中的一半。
问题是，因为我可能会改变布局顺序()，所以:first-child在视觉上并不总是第一个。
浏览 88提问于2014-05-03得票数 74
回答已采纳
当我使用flexbox时，如果我想要一个边距来增加每个元素的间距，我通常会这样做： flex: 1 0 auto;} margin-right: 0px;如果我不使用flex-wrap，这是可行的，因为它们的最后一项将始终是行中实际的最后一项。然而，当我使用flex-wrap时，行的最后一项会随着窗口宽度的变化而变化(并且会自动添加<
浏览 0提问于2017-11-30得票数 8
3回答
我试图将基于表和JS的旧布局转换为具有向后兼容性的新Flexbox，方法是为旧浏览器保留表(特别是IE8、IE9和Opera 10+)。我尝试过各种定义，如display:inherit、display:initial，但没有一个能将显示定义重置为作为flex正确工作。无论我为.details设置了什么显示，它都不作为弹性项工作，也不会增长来填充剩余的空间。
您知道如何在不使用JS检测浏览器版本和切换样式的情况下重写吗？我尝试过谷歌搜索解决方案，但大多数结果只是关于<em
浏览 5提问于2014-11-26得票数 16
回答已采纳
1回答
我想在Flexbox行包装容器的大型项目之间留出空间。
在我问我的问题之前，请看下面链接中文章末尾的最后一个Codepen示例(“让我们尝试更好地使用flex灵活性！”)：！我的问题是，当窗口最宽(> 800 My )时，我如何在黄色、蓝色和红色之间添加空间(两个窗口和主窗口)？就在此刻，他们在一排上弯着腰，但互相靠在一起。我的理解是:没有项目之间的空间，因为蓝色(主)将占100%的宽度它是在挠曲之外，因为它里面的所有文本。但是如果黄色、蓝色和红色的宽度不超过20%，那么它们<em
浏览 2提问于2016-07-08得票数 1
回答已采纳
下面是柱塞链接： <items>两个FlexBox项的FlexBox绑定到在index.html中初始化的LayoutModel。如您
浏览 0提问于2015-08-12得票数 1
回答已采纳
当我使用mavenCentral()时，我得到了下面的错误消息，
Could not HEAD 'https://google.bintray.com/flexbox-layout/com/google/android/flexbox/2.0.1/flexbox-2.0.1.pom'.
浏览 0提问于2021-08-23得票数 6
回答已采纳
FooItem> <foo:FooItem></foo:Foo>
var layout = oControl.createLayout();//creates FlexBox</em
浏览 3提问于2016-01-05得票数 0
回答已采纳
我需要组成一个页面，其中有一个页眉和页脚，以及一些文本之间的内容。
页面大小是固定的(一个iframe)，并且有一个固定高度的页脚，但是页眉的内容可以改变(它会被翻译，因此文本行数会变化)。如果它们之间的内容很长，则应该向内容本身添加一个滚动条。无论我做什么，我都不能让它只在CSS上工作。我可以滚动到整个页面(或者顶部区域，包括页眉)，或者内容div的文本超出了它的边界。
浏览 1提问于2013-07-15得票数 0
回答已采纳
1回答
，或者从列表中删除项name和status，以便它可以再次添加到另一个组中。我知道如何在单击selected项时删除它，但是当其他类或函数调用“移动该特定项/将该特定项分配给另一个组”时，如何做到这一点？此f2list由另一个public void AddUserToList调用，但这仅用于分配文本，如f2list(group,username,status); (例如。;及其检查是否已经存在username以防止双项。
如何在</e
浏览 1提问于2016-05-06得票数 4
回答已采纳
当我从flexbox中移除一个项目时，其余的项目立即“捕捉”到它们的新位置，而不是动画。有没有办法对flexbox进行动画编辑(添加和删除)？这实际上对我来说是一个精彩的展示，也是flexbox缺少的一部分。
浏览 1提问于2012-06-20得票数 64
提供者是flutter中小部件之间交互的正确方法。但是提供者管理一个数据，但是只要滚动，就不会有任何数据被更改。如何在放置在同一级别的小部件之间发送滚动命令(如jumpTo)？(不像父母/子女关系)listProvider.createItem("New item");
列表应该向下滚动到最后。
浏览 5提问于2022-01-27得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
