html - 使用 "order"属性在底部开始 div 并随着我添加更多而逐渐上升-6ren

html - 使用 "order"属性在底部开始 div 并随着我添加更多而逐渐上升

转载作者：行者123 更新时间：2023-11-28 03:38:20

26

4

正如标题所示，我正在搞乱 display: flex 和 order:。当我从第一个订购的 div (order: 0;) 开始时，它将从我页面的顶部开始。当我添加第一个 (order: 1;) 时，它从页面底部开始，依此类推。还有什么奇怪的是，当我在顺序中添加更多 div 时，它会逐渐将它们在页面上向上移动到它们最初应该开始的位置。

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  height: 100px;
  text-align: center;
}

.lime {
  width: 100%;
  order: 0;
  background-color: lime;
}

.red {
  width: 50%;
  order: 1;
  background-color: red;
}

.orange {
  width: 50%;
  order: 2;
  background-color: orange;
}

.teal {
  width: 100%;
  order: 3;
  background-color: teal;
}

.light_blue {
  width: 20%;
  order: 4;
  background-color: lightblue;
}

.dark_blue {
  width: 60%;
  order: 5;
  background-color: darkblue;
}

.green {
  width: 20%;
  order: 6;
  background-color: green;
}

<body>
  <div class="container">
    <div class="box lime"></div>
    <div class="box dark_blue"></div>
    <div class="box light_blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box orange"></div>
    <div class="box teal"></div>
  </div>
</body>

我想我的问题是为什么会这样，为什么在我添加 .green {width: 20%; 之后它才按预期工作？顺序:6； background-color: green;} 在我的 css 末尾？

最佳答案

您的标记按预期工作，(并且它仅在您设置 order:6 后按预期工作，因为在此之前该元素的默认值为 order:0)

记住 order :

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

但是，您可以简化代码中 order 的使用，只需在您正在使用的相同元素中使用 order 4,5 和 6。

body {
  margin: 0
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 100px;
}

.lime {
  background-color: lime;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.teal {
  background-color: teal;
}

.light_blue {
  order: 4;
  background-color: lightblue;
}

.dark_blue {
  flex: 0 60%;
  order: 5;
  background-color: darkblue;
}

.green {
  order: 6;
  background-color: green;
}

.fifthish {
  flex: 0 20%
}

.half {
  flex: 0 50%
}

.full {
  flex: 0 100%
}

<div class="container">
  <div class="box lime full"></div>
  <div class="box dark_blue"></div>
  <div class="box light_blue fifthish"></div>
  <div class="box green fifthish"></div>
  <div class="box red half"></div>
  <div class="box orange half"></div>
  <div class="box teal full"></div>
</div>

关于html - 使用 "order"属性在底部开始 div 并随着我添加更多而逐渐上升，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44346315/

26

4

0

文章推荐： html - 表数据根据 Metro 应用程序中的数组项不断变化？

文章推荐： javascript - 如何从异步调用返回响应？

文章推荐： javascript - 无法从 public_html/subdomainname 访问 public_html/images

文章推荐： javascript - 从文本文件构建数组(奇怪的格式)

sql - 在 SQL 中的 order by 中嵌套 order by/order by
我正在寻找通过 sql 查询对我的 sql 结果进行排序，大概在 order by 子句中使用某种嵌套的 order by/order by 我有以下数据: TERM USER I
sql - order by 后跟从属 order by
我有一个表格，其中包含如下所示的部分数据。我已经在 edition_id 上完成了订购。现在还需要订购 laungauge_id，这取决于 edition_id 的值。 Edition_id 是指报纸
SQL Order By 中的 Order By
所以我有两个表，Questions 和 Answers，由多对多关系表 QuestionsAnswers 连接。 Questions 有一个排序列，允许我控制它们如何显示给用户，而 Questions
recursion - FP : What does "order" mean in "high order" functions? 递归函数是否为 "high order"函数？
当我们说“高阶”函数时，我怀疑“阶”的真正含义是什么？例如，我有一个嵌入式函数调用: f.g.h 那么它叫“三阶”函数吗？ “高阶”函数是静态函数累加的概念吗？然后当我有一个递归函数 f 时，在运行时
sql - 对于多个 sql order by 子句，即使之前的 order by 已经证明行不相等，所有的 order bys 是否都运行？
在具有多个 order by 子句的 SQL 查询中，它们是否真的在执行期间全部运行？例子: select * from my_table order by field5, field3, fiel
SPARQL group by 和 order by : not ordered
我跟进 query其中 schema.org 数据库用于查找类的子级数量 - 作为比我的应用程序更简单的数据库。我想按字母顺序连接 child 的名字。查询: prefix schema: pre
wolfram-mathematica - Ordering@Ordering 和排名排列
正如 nazdrovje 所指出的(参见 here ) Ordering@Ordering 可用于获取列表中每个元素的排名。即使列表包含重复元素，结果也是 n 排列(作为整数 1 到 n 的有序列表，
MySQL:如何在使用父查询 "order by"的同时使用子查询列 "order by"？
我有两张 table 。它们都有日期和 item_id 列。我正在通过 item_id 加入他们。结果应按两个日期列一起排序下面的代码有效，生成正确的结果集... 但是它们仅按第一个表的日期排
mysql - SQL ORDER BY by 内部 ORDER BY
尝试掌握 SQL 我想按日期订购，然后在其中按标题订购。示例: SELECT * FROM tblboek ORDER BY jr_van_uitgave DESC 如何在按年龄的订单中按头衔排序？
mysql order by field order 不符合我的期望
我想使用 FIELD 参数对我的 SQL 输出进行排序，但是当我这样做时，它首先吐出我不想要的结果，然后它首先吐出我想要的结果。在结果之上，它首先吐出。如果这有意义的话 ;) 如何先吐出已定义的值，然
php - MySQL order-by 原始 "where order"
我有一个无法破解的排序问题。我这样从我的表中选择: SELECT * FROM 'sidemodules' WHERE name = 'module1' OR name = 'module2' OR
python - 冲突 'order' 模型在应用程序 'order'
我对 Django oscar 的覆盖模型有疑问。我想为模型添加一个新字段，但是当我这样做时，我遇到了 RuntimeError: Conflicting 'order' models in appl
Multiple "order by" in LINQ(LINQ中的多个“order by”)
我有两个表，电影和类别，我想先按CategoryID获得一个排序列表，然后按名称排序。。电影表格有三个列ID、NAME和CategoryID。CATEGORY表有两列ID和NAME。。我尝试了下面这样
Does ORDER BY apply before or after DISTINCT?(ORDER BY适用于DISTINCT之前还是之后？)
In a MySQL query, when using the DISTINCT option, does ORDER BY apply after the duplicates are re
sql - 如何构建一个 sql 查询以返回 avg(price)、min(price)、max(price) 与 avg(order)、min(order)、max(order)
我想创建一个 sql 查询，为 2 个不同的查询一起返回结果。例如，我想要以下形式的结果:产品名称, avg(price), min(price), max(price), avg(order), m
sql - 使用 order by 时的动态 order by - 加速
我正在使用行号从存储过程中获取分页结果。我发现使用动态 case 语句列名称进行排序会减慢速度 - 但如果我对所有内容进行硬编码就可以了。有没有办法通过不使整个 sql 查询一个字符串并使用 SP
z-order-curve - 如何在范围搜索中使用Morton Order(z阶曲线)？
如何在范围搜索中使用Morton Order？在wiki中，在“使用一维数据结构进行范围搜索”段落中，它说 "the range being queried (x = 2, ..., 3, y =
javascript - Order By (alias) then Order by second sequelize
我正在使用 sequelize.js，我在使用 order 语句时遇到问题，我想先通过 if id 排序(如果我的 id 在该别名表中)，然后再排序.... order = [['alias', 'i
php - MySQL 查询末尾的 "ORDER BY order"导致问题
我有一个 php 脚本，它从数据库中提取内容并以某种方式打印它们。数据库有一个名为“order”的列标题，它的 INT 大小为 11。当我从数据库中获取数据时，我试图按数据库中的值“order”对内容
mysql - 更新 order by 子句排序不同，然后选择 order by
我有一个带有 ORDER BY 子句的 UPDATE 查询。我已将相同的查询复制到具有相同 ORDER BY 子句的 SELECT 中，但得到了不同的结果。更新查询: UPDATE t_locks

首页

博学

6Ren·AI

商城

html - 使用 "order"属性在底部开始 div 并随着我添加更多而逐渐上升