数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 设置弹性项目的顺序？
通常，所有 HTML 元素在网页上的呈现顺序与其在 HTML 文档中定义的顺序相同。但是，我们可以使用 CSS 的 order 属性更改任何元素的顺序。我们可以对在弹性盒或包含display: flex;属性的元素内部定义的元素使用 order 属性。一旦我们在父元素上使用了 display flex，我们就可以使用 order 属性通过 order 属性更改子弹性项目的顺序。
注意 - 请注意，order 属性仅对位于弹性盒或包含 display flex 属性的容器内的元素有效。
语法
以下语法将向您展示如何将 order 属性与弹性项目一起使用，以便按您选择的特定顺序对其进行排序 -
order: numeric_value;
现在让我们通过使用代码示例在实践中实现它来详细了解 order 属性的用法。
步骤
步骤 1 - 在第一步中，我们将定义一个父元素，它将充当弹性盒，并且其子元素的顺序将使用 order 属性更改。
步骤 2 - 在下一步中，我们将定义子元素并使用 order 属性与它们一起使用，以使它们按您希望的顺序显示。
步骤 3 - 在最后一步中，我们将获取所有元素及其各自的类，并将所需的 CSS 应用于所有元素。
示例
以下示例将帮助您理解使用 order 属性按任何顺序排序弹性项目的用法 -
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
display: flex;
border: 2px solid red;
}
.inner-div {
border: 1px solid green;
padding: 5px;
margin: 5px;
}
.inner-div1 {
order: 3;
}
.inner-div2 {
order: 5;
}
.inner-div3 {
order: 1;
}
.inner-div4 {
order: 2;
}
.inner-div5 {
order: 4;
}
</style>
</head>
<body>
<center>
<h2>Set the order of flexible items using CSS</h2>
<p>The flexible div elements of the below flexbox container are ordered using the order property of CSS.</p>
<div class = "main-container">
<div class = "inner-div inner-div1"> This is the 1st flexible div element set to 3rd position using the order property. </div>
<div class = "inner-div inner-div2"> This is the 2nd flexible div element set to 5th position using the order property.</div>
<div class = "inner-div inner-div3"> This is the 3rd flexible div element set to 1st position using the order property. </div>
<div class = "inner-div inner-div4"> This is the 4th flexible div element set to 2nd position using the order property. </div>
<div class = "inner-div inner-div5"> This is the 5th flexible div element set to 4th position using the order property. </div>
</div>
</center>
</body>
</html>
在上面的代码示例中，我们已将 order 属性与弹性项目一起使用，以更改弹性盒内 HTML 元素的默认顺序。我们将所有子元素的位置从其默认顺序更改为我们希望它们显示的顺序。
让我们再看一个更复杂的代码示例，其中我们将弹性盒内的多个元素排序到复杂排列中的不同位置。
方法
此示例的方法与上一个示例几乎相同。您只需要在文档中添加更多 HTML 元素以使其复杂化，并按您选择的顺序进行排列。
示例
以下示例将说明如何使用 order 属性按不同顺序排列 HTML 元素 -
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
display: flex;
border: 2px solid red;
flex-wrap: wrap;
justify-content: center;
}
.inner-div {
border: 1px solid green;
padding: 5px;
margin: 2px;
width: 16%;
}
.inner-div1 {
order: 10;
}
.inner-div2 {
order: 8;
}
.inner-div3 {
order: 9;
}
.inner-div4 {
order: 7;
}
.inner-div5 {
order: 4;
}
.inner-div6 {
order: 1;
}
.inner-div7 {
order: 5;
}
.inner-div8 {
order: 3;
}
.inner-div9 {
order: 6;
}
.inner-div0 {
order: 2;
}
</style>
</head>
<body>
<center>
<h2>Setting the order of flexible items using CSS </h2>
<p>The flexible div elements of the below flexbox container are ordered using the order property of CSS.</p>
<div class = "main-container">
<div class = "inner-div inner-div1"> This is the 1st flexible div element set to 10th position using the order property. </div>
<div class = "inner-div inner-div2"> This is the 2nd flexible div element set to 8th position using the order property.</div>
<div class = "inner-div inner-div3"> This is the 3rd flexible div element set to 9th position using the order property. </div>
<div class = "inner-div inner-div4"> This is the 4th flexible div element set to 7th position using the order property. </div>
<div class = "inner-div inner-div5"> This is the 5th flexible div element set to 4th position using the order property. </div>
<div class = "inner-div inner-div6"> This is the 6th flexible div element set to 1st position using the order property. </div>
<div class = "inner-div inner-div7"> This is the 7th flexible div element set to 5th position using the order property.</div>
<div class = "inner-div inner-div8"> This is the 8th flexible div element set to 3rd position using the order property. </div>
<div class = "inner-div inner-div9"> This is the 9th flexible div element set to 6th position using the order property. </div>
<div class = "inner-div inner-div0"> This is the 10th flexible div element set to 2nd position using the order property. </div>
</div>
</center>
</body>
</html>
在此示例中，我们使用了包含多个元素的复杂元素排列，并按您希望显示或排列的顺序对其进行排序。我们使用了 10 个元素，并将它们从其默认顺序按 1 到 10 的不同顺序进行排列。
结论
在本文中，我们学习了设置网页上弹性项目顺序的方法。我们借助两个不同的代码示例讨论了该方法。在第一个示例中，我们使用了少量 div 元素，并使用 order 属性将它们重新排列到不同的位置。而在第二个示例中，我们使用了复杂的排列，并将元素按我们希望在浏览器中显示的顺序进行排列。
76 次浏览
