程序员经验分享-hwhale

使用“order”属性在同级之间定位弹性项目

2023-12-01

我有一个包含一到三个弹性项目的弹性盒。

正确的布局应该是这样的<div></div><h2></h2><div></div>在包含的弹性框中。

我有代码可以完成这项工作（请参阅this) 仅当布局顺序保持不变时。

我的问题是：如何有办法确保，如果标记并不总是按该顺序（比如说我的一位同事未能正确执行），我该如何设置它以便<h2>总是显示在中间（或者在只有一个 div 和一个 h2 的情况下尽可能接近）。

为了实现这一目标，我一直在利用order财产;然而，我要么没有充分利用它的潜力，要么它是错误的解决方案。

我已经做了thisjsfiddle 作为它的测试场，但也有这个示例：

.diff-order {
  order: 2
}
.diff-order:not(h2) {
  order: 1;
}


.container {
  display: flex;
}
.container > * {
  flex: 1;  /* KEY RULE */
  border: 1px dashed red;
}
h2 { 
  text-align: center;
  margin: 0;
}
.container > div {
  display: flex;
}
.diff-order {
  order: 2
}
.diff-order:not(h2) {
  order: 1;
}
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
  <h2>
    I'm an h2
  </h2>
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>

它的作用是移动<h2>到包含 div 的末尾。我想看看是否有办法设置顺序，以便<h2>永远是中心项目。也许是伪类:before and :after可以使用（也许可以替代 h2 周围的 div...）。

谢谢。


当有三要素在容器中：

  • div
  • h2
  • div

AND

  • 这些元素的顺序在源中有所不同......

AND

  • 你想要h2永远处于中间...

然后，你可以这样做：

.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

这可以翻译为：

无论源中元素的顺序如何，

  • 第一个 div 将按视觉顺序首先出现
  • The h2将按视觉顺序出现在第二位
  • 第二个 div 将出现在视觉顺序的最后

.container {
  display: flex;
}
.container > * {
  flex: 1;
  border: 1px dashed red;
}
h2 { 
  text-align: center;
  margin: 0;
}

.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
  <div>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>

  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<p><span>TRUE CENTER</span></p>

对于有的情况一个元素在容器中添加justify-content: space-around.

因为每个项目已经有flex: 1应用,space-around当容器中有两个或多个项目时，将不起作用。

然而，当只有一件物品时，space-around决心center.

从规格来看：

8.2.轴对齐：justify-content财产

The justify-content属性沿主轴对齐弹性项目 Flex 容器的当前行。

space-around

Flex 项目均匀分布在行中，空间大小减半 两端。

如果剩余自由空间为负或者有 该行上只有一个弹性项目，该值与center.

.container {
  display: flex;
  justify-content: space-around; /* NEW */
}
.container > * {
  flex: 1;
  border: 1px dashed red;
}
h2 { 
  text-align: center;
  margin: 0;
}

.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
  <div>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>

  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
</div>
<p><span>TRUE CENTER</span></p>

您现在可以购买一件或三件弹性商品。

对于两个项目，它会变得有点棘手。

因为你总是想要h2居中，我建议始终在容器中放置两个 div，即使它们是空的。然后flex: 1将为所有三个项目提供相同的宽度。

.container {
  display: flex;
  justify-content: space-around;
}
.container > * {
  flex: 1;
  border: 1px dashed red;
}
h2 { 
  text-align: center;
  margin: 0;
}

.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
  <div>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div>

  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <div></div>
  <div>
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <h2>
    I'm an h2
  </h2>
</div>
<div class="container">
  <h2 class="diff-order">
    I'm an h2
  </h2>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
  <div class="diff-order">
    <span>I'm a span</span>
    <span>I'm a span</span>
  </div>
</div>
<p><span>TRUE CENTER</span>
</p>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

flexbox

使用“order”属性在同级之间定位弹性项目 的相关文章

  • 如何使使用 css 调整大小的图像在 IE 中看起来不错？

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制

  • JavaScript 继承；调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu

  • 如何通过单击链接来更改 div 的内容？

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

  • IE 中的 XPath 查询使用从零开始的索引，但 W3C 规范是从一开始的。我应该如何处理差异？

    问题 我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码 以便使其也适用于其他浏览器 由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN

  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com

  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150

  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下

  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做

  • 编辑第一个选项名称

    我有以下我无法访问的代码 我想要做的是将一些文本添加到现在为空的第一个选项中 诸如 选择地址 之类的文本

  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var

  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使

  • 如何从浏览器向服务器发送“页面将关闭”消息？

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message

  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht

  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

  • 主页（网格）上的缩略图现在显得模糊。如何纠正？

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I

  • Webpack 4：如何使用 LESS 获取 CSS 源映射？

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

  • 如何从 json 文件创建模型？ （ExtJS）

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服

随机推荐

  • 没有这样的模块“Sinch”Xcode 9.1 Swift 4

    这个问题可能与这个 重复 Sinch 集成到 swift 项目中 但我正在执行所有这些步骤 但遇到同样的错误 没有这样的模块 Sinch 我遵循以下步骤 请检查并告诉我是否遗漏了任何步骤或需要添加 我已将其添加到我的 podfile 中 吊

  • jQuery 验证：如果填充了另一个输入，则只需要输入

    我在用jQuery 验证插件来验证 配置页面 我有很多输入 如姓名 电话 电子邮件 最后是 更改密码 部分 我有 3 个输入 例如

  • 在 WooCommerce 中设置优惠券描述

    如果用户成为会员的时间足够长 我的网站会动态地向用户提供优惠券 当我生成优惠券时 我想为优惠券分配一个描述 但是 我似乎无法通过使用密钥更新帖子的元数据来分配描述description as the docs建议我应该可以 目前我正在尝试像

  • WordPress 不处理外部 php 文件

    我正在尝试为 WordPress 编写自己的主题 并编写了一个包含所有模态 twitter bootstrap 的文件 这些模态是 html 我将其添加到主题部分 创建了一个 inc 文件夹 并将其命名为 modals php 我通过 ph

  • 在适用于 iPhone 的 OpenGL ES 中请求 DepthBuffer

    我正在 iPhone 上创建 3D OpenGL ES 视图 并希望设置深度缓冲区 以便可以使用它 我正在打电话glEnable GL DEPTH TEST 等等 但因为我还没有设置 z 缓冲区 所以它什么也不做 我正在寻找一个等效的调用g

  • 模板中的 Angular 2 主题标签是什么意思？

    我正在使用 Angular 2 我发现了类似的东西

  • 设置两个带有 QStyledItemDelegate 的验证器后，QtableView 就会崩溃

    基于这个答案Question我更进一步 基于 QStyledItemDelegate 创建了两个单独的验证器 一个用于整数 一个用于双精度 如果每个验证器是唯一的一组 则它可以完美工作 一旦我尝试设置两个验证器 每个验证器都在其单独的列中

  • Go 是否支持内置类型（如映射和切片）的运算符重载？

    在Python中 我可以通过定义来定义覆盖列表项访问和字典值访问的类型 getitem 我可以在 Go 中做类似的事情吗 What I mean is type MySlice MyItem Definition of MySlice fu

  • 如何从 firebase 检索数据，其中日期值是当前日期 1 个月前的数据

    SimpleDateFormat sdf new SimpleDateFormat dd MM yyyy HH mm Calendar c Calendar getInstance String date sdf format c getT

  • Nodejs - 将输出流式传输到浏览器

    var http require http var sys require sys var filename process ARGV 2 var exec require child process exec var com exec u

  • servlet中filter和chain有什么用？

    chain doFilter req res 我们在 servlet 程序中使用了它 我想知道这个方法有什么用doFilter 在 servlet 中 另外 Java servlet 中的过滤器和链概念有什么用 Servlet 过滤器是责任

  • 带seaborn的条形图，按行着色

    我创建了一个组合条形图 无法按行着色 我尝试了色调 颜色 调色板 库的所有组合 但没有成功 我的代码是 fig axes plt subplots 1 5 figsize 11 8 my new color UA white AA blue

  • 尽管已安装，JavaFX PieChart 工具提示仍不显示

    我尝试为 PieChart 的每个 切片 显示一个工具提示 与 Chart js 中的类似 I found 这个答案基本上试图在相同的框架中实现相同的目标 它有两个赞成票 从其他 已接受的 答案来看 这似乎也适用于其他图表类型 然而 从没有

  • 如何从 Xcode 中的 uipicker 获取所选时区的日期和时间

    我正在尝试在标签或文本字段中显示 uipicker 中选定时区的日期和时间 但我没有任何方法来解决此问题 所以请任何人帮助我 提前致谢 SelectedTimeZone 权重objectAtIndex pickerView selected

  • 为所有视图提供额外的上下文

    我正在使用 django 为我的团队构建一个项目管理网站 我的基本模板包括一个侧边栏菜单 其中包含所有项目和用户的列表 链接到DetailView分别针对该用户或项目 我的问题是我需要提供User and Project模型到每个视图 以便

  • 子边距为父边距添加边距

    如果我有以下代码怎么办 HTML section class home section section class main h1 Hello h1 section CSS代码 html body height 100 width 100

  • Freemarker/Velocity - 日期操作

    我对这两个模板引擎有一个相当简单的问题 我正在尝试确定一个未来 过去的日期 从现在开始的固定时间 例如18个月前 或者明天 我知道可以使用velocity freemarker模板中的java日期对象来做到这一点 类似于 date add

  • 如何在 C# 中将 lambda 表达式作为参数传递

    我是使用 lambda 表达式的初学者 我有一个经销商名单 我必须为每个经销商计算等级 要求是将等级计算分成单独的方法 所以我正在编写以下两个方法 但是我无法将参数传递给CalculateGrade method public IEnume

  • 如何制作 Parse.Query.AND？

    我需要用 and 连接 Parse com 中的 2 个查询 我的代码是 var queryDeseo1 new Parse Query DeseosModel queryDeseo1 equalTo User Parse User cur

  • 使用“order”属性在同级之间定位弹性项目

    我有一个包含一到三个弹性项目的弹性盒 正确的布局应该是这样的 div div h2 h2 div div 在包含的弹性框中 我有代码可以完成这项工作 请参阅this 仅当布局顺序保持不变时 我的问题是 如何有办法确保 如果标记并不总是按该顺

热门标签