資料結構
網路
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 次瀏覽
