資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 CSS 中使靈活的專案長度相同，而不管其內容如何？
讓我們嘗試理解flex 屬性。Flex 是一個簡寫屬性，它設定彈性元素長度的條件，即是否允許它根據其內容量或視口寬度進行調整。
Flex 屬性
flex 屬性的組成屬性如下所示：
Flex-grow
此屬性設定將在所有剩餘的 flex-container 空間中分配給專案的可用空間。換句話說，它設定專案的尺寸是否允許增長。此屬性的值是一個整數。
空閒空間等於 flex 容器的大小減去所有 flex 元素大小的總和。如果所有同級專案都具有相同的 flex-grow 係數，則所有同級專案將獲得相同數量的剩餘空間；否則，將根據各個 flex-grow 係數設定的比率進行分配。
此屬性的初始值為 0。它應用於 flexbox 中的所有專案，包括偽元素。它本質上不可繼承，其動畫型別為數字。
Flex-shrink
正如 flex-grow 屬性允許 flexbox 增長一樣，此屬性允許 flex 專案在內容無法容納在指定空間中時收縮。
此屬性的初始值為 1，而不是 0。它也應用於 flexbox 中的所有專案，包括偽元素。與 flex-grow 一樣，此屬性也本質上不可繼承，其動畫型別為數字。
Flex-basis
此屬性用於指定容器的初始主要大小。除非使用box-sizing另行指定，否則它決定內容盒的大小。
它可以有兩個可能的值。“content”值會根據內容量而變化，第二個值是一個絕對值或百分比的寬度值。你也可以使用 auto 關鍵字作為寬度。
使用 flex 屬性
如前所述，flex 是一個簡寫屬性。這就是為什麼我們可以透過指定一個、兩個或所有三個值來使用 flex 屬性的原因。
當你只指定一個屬性值時，它可以是 flex-grow/flex-basis 的有效值或全域性關鍵字值。
使用兩個值時，第一個值將作為 flex-grow 的值，第二個值將作為 flex-shrink 或 flex-basis 的值。
使用三個值時，第一個將用於 flex-grow，第二個將用作 flex-shrink 的值，最後一個將用於 flex-basis。
示例
下面給出了在 CSS 中使用 flex 屬性的示例。
<!DOCTYPE html>
<html>
<head>
<title>CSS flex Property</title>
<style>
#Target {
width: 500px;
height: 400px;
border: 1px dashed rgb(8, 0, 0);
display: flex;
}
#Target div {
flex: 1 0 auto;
}
.Target1 {
background-color: rgb(193, 169, 169);
}
.Target2 {
background-color: rgb(99, 121, 99);
}
.Target3 {
background-color: rgb(221, 233, 221);
}
</style>
</head>
<body>
<h2>Example of using a flex property in CSS</h2>
<div id="Target">
<div class="Target1">Lorem ipsum dolor sit amet.</div>
<div class="Target2">Lorem, ipsum dolor.</div>
<div class="Target3">Lorem, ipsum.</div>
</div>
</body>
</html>
示例
此示例在 CSS 中使用了 flex-grow 屬性。
<!DOCTYPE html>
<html>
<head>
<title>CSS flex Property</title>
<style>
.FlexContainer {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.FlexItem {
background-color: blueviolet;
padding: 10px;
border: 5px dashed red;
color: aliceblue;
font-weight: bold;
font-size: 2em;
text-align: center;
}
.Flex1 {
flex: 1 1 20em;
}
.Flex2 {
flex: 2 2 20em;
}
</style>
</head>
<body>
<ul class="FlexContainer">
<li class="FlexItem Flex1">This is an example of using flexbox 1</li>
<li class="FlexItem Flex2">This is an exmaple of using flexbox 2</li>
</ul>
</body>
</html>
使用 flex 屬性建立相同長度的專案
正如我們所見，我們可以使用 flex 屬性來控制彈性元素的大小。因此，如果我們必須使所有彈性專案的長度相同，我們將使用此屬性。
示例
下面的示例使用 flex 屬性在 CSS 中使用 flex 屬性建立相同長度的 flexbox 專案。
<!DOCTYPE html>
<html>
<head>
<style>
center {
margin: 75px;
color: rgb(10, 143, 10);
font-size: 48px;
}
.FlexContainer {
display: flex;
border: dashed 3px black;
width: 500px;
height: 400px;
}
.FlexContainer div {
flex: 1;
}
.FlexItem1 {
background-color: rgb(246, 227, 192);
}
.FlexItem2 {
background-color: rgb(197, 197, 197);
}
.FlexItem3 {
background-color: rgb(198, 224, 224);
}
</style>
</head>
<body>
<center>
<div class="FlexContainer">
<div class="FlexItem1">Lorem, ipsum dolor.</div>
<div class="FlexItem2">Lorem, ipsum dolor.</div>
<div class="FlexItem3">Lorem, ipsum dolor.</div>
</div>
</center>
</body>
</html>
結論
總之，CSS 透過使用多個屬性（如“width”、“max-width”和“flex”）允許靈活的專案具有相同的長度，而不管其內容如何。這種靈活性在設計需要根據檢視裝置調整大小的自適應網站時非常有用。透過使用這些屬性，設計師可以建立無論在什麼裝置上檢視都看起來很棒的佈局。
瀏覽量：270
