資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS設定特定彈性專案的大小？
在CSS中，我們可以使用CSS提供的某些彈性屬性建立我們自己的彈性盒。CSS彈性盒用於為移動裝置和其他小螢幕裝置建立響應式佈局，透過調整這些螢幕尺寸的佈局來排列布局。為了建立網頁的彈性盒來管理專案及其大小，我們可以使用display: flex;屬性，然後我們可以使用與此屬性相關的彈性屬性根據裝置寬度來排列專案。
現在讓我們討論並理解display flex及其所有相關屬性，以管理網頁上的專案。
以下是可與flex屬性一起使用的屬性，用於建立彈性盒，排列彈性專案並設定其大小：
order − 此屬性可用於將彈性專案從其預設順序設定為您想要顯示的順序。
語法
order: numeric_value; // It takes numeric value to set the order.
flex-grow − flex-grow屬性可用於設定彈性專案相對於其他專案可以增長的額外正空間。
語法
flex-grow: numeric_value;
flex-shrink − flex-shrink是一個屬性，可用於設定彈性專案相對於其他專案可以減小其寬度或縮小自身的負空間。
語法
flex-shrink: numeric_value;
flex-basis − 此屬性用於為任何專案初始設定彈性專案寬度。
語法
flex-basis: numeric_value; // Takes numeric value in pixels to set initial width of the flex item.
flex − flex屬性是一個簡寫屬性，用於使用上述三個屬性，例如flex-grow、flex-shrink和flex-basis。您可以為此屬性的每個屬性使用三個不同的值。第一個值將代表flex-grow，第二個值將代表flex-shrink，第三個值將代表flex-basis屬性值。
語法
flex: value value value;
現在讓我們透過實際實現程式碼示例來詳細瞭解上述屬性。
在第一個程式碼示例中，我們將瞭解order屬性的使用，以更改彈性專案的順序。
步驟
步驟1 − 在第一步中，我們將定義一個父元素，該元素持有display flex屬性及其關聯的類。
步驟2 − 在此步驟中，我們將定義內部子元素，其順序將使用CSS中的order屬性更改。
步驟3 − 在最後一步中，我們將使用它們的類獲取所有這些元素並更改它們的順序。
示例
以下示例將解釋order屬性的使用，並按照您希望它們出現的順序排列彈性專案：
<!DOCTYPE html>
<html lang = "en">
<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: 3;
}
.inner-div2 {
order: 5;
}
.inner-div3 {
order: 2;
}
.inner-div4 {
order: 1;
}
.inner-div5 {
order: 4;
}
</style>
</head>
<body>
<center>
<h2>Setting the size of specific flex-item 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 2nd position using the order property. </div>
<div class = "inner-div inner-div4"> This is the 4th flexible div element set to 1st 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屬性來設定彈性專案的不同順序，這些彈性專案通常將按此順序出現。我們設定了所有專案的順序，這與它們的預設順序不同。
讓我們討論另一個程式碼示例，在這個示例中，我們將看到簡寫flex屬性以及其他三個屬性flex-grow、flex-shrink和flex-basis的使用。
方法
上述示例和此示例的方法幾乎相同。您只需要新增一個具有子元素的父div，並在這些元素的子元素上使用flex屬性和其他三個屬性。
示例
以下示例將幫助您瞭解上述演算法中的更改以及單獨使用三個屬性和簡寫屬性：
<!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-div11 {
flex-grow: 2;
}
.inner-div12 {
flex-shrink: 1;
}
.inner-div13 {
flex-basis: 250px;
}
.inner-div21 {
flex: 2 5 200px;
}
.inner-div22 {
flex: 5 3 300px;
}
.inner-div23 {
flex: 3 3 150px;
}
</style>
</head>
<body>
<center>
<h2>Setting the size of specific flex-item using CSS</h2>
<p>The below flex items arranged using the flex-grow, flex-shrink and flex-basis property individually.</p>
<div class = "main-container">
<div class = "inner-div inner-div11"> This flex item uses the flex grow property to grow itself relative to other elements. </div>
<div class = "inner-div inner-div12"> This flex item uses the flex shrink property to shrink itself relative to other elements. </div>
<div class = "inner-div inner-div13"> This flex item uses the flex basis property to set its initial width. </div>
</div>
<p>The below flex items arranged using the flex property.</p>
<div class = "main-container">
<div class = "inner-div inner-div21"> This flex item contains the flex property with flex: 2 5 200px; these values. </div>
<div class = "inner-div inner-div22"> This flex item contains the flex property with flex: 5 3 300px; these values. </div>
<div class = "inner-div inner-div23"> This flex item contains the flex property with flex: 3 3 150px; these values. </div>
</div>
</center>
</body>
</html>
在上述示例中，我們使用了彈性盒的不同CSS屬性來為不同的螢幕裝置排列彈性專案。我們單獨使用flex-grow、flex-shrink和flex-basis屬性以及第一個div的子元素。同時，我們使用flex屬性來排列第二個div元素的子元素。
結論
在本文中，我們學習瞭如何在不同的螢幕裝置上設定不同彈性專案的大小。我們討論了實現此任務的不同CSS彈性屬性，並藉助每個屬性的程式碼示例來理解它們。在第一個程式碼示例中，我們瞭解了order屬性的使用。而在第二個示例中，我們詳細討論了四個不同的CSS屬性。
123 次瀏覽
