数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学使用 CSS 控制弹性项目尺寸
要控制 CSS 中弹性项目的尺寸，请使用 `flex` 属性。将 `flex` 视为弹性项目的长度。`flex` 包括以下属性：
`flex-grow` − 设置弹性增长因子，即项目相对于其他弹性项目将增长多少。
`flex-shrink` − 设置弹性收缩因子，即项目相对于其他弹性项目将收缩多少。
`flex-basis` − 弹性项目的初始大小。
使用简写属性控制弹性项目尺寸
我们为弹性项目设置了简写属性。这里，我们为 `flex-grow`、`flex-shrink` 和 `flex-basis` 设置了值：
flex: 2 1 auto;
示例
以下是控制弹性项目尺寸的代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 2 1 auto;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Controlling flex items dimesions</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
使用单个值控制弹性项目尺寸
如果为 `flex` 设置单个无单位的值，则该值用于 `flex-grow` 属性，如下所示：
flex: 1;
示例
让我们来看一个使用单个值控制弹性项目尺寸的示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 1;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Control the Dimensions of flex items with a single value</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
使用两个值控制弹性项目尺寸
如果为 `flex` 设置两个无单位的值，则它们分别用于 `flex-grow` 和 `flex-shrink` 属性，如下所示：
flex: 2 2;
示例
让我们来看一个控制弹性项目尺寸的示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 2 2;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Control the Dimensions of flex items with two values</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
更新于：2023年10月30日
101 次浏览
广告