css3通过设置display属性的值为flex或inline-flex声明盒子弹性。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，弹性容器内包含了一个或多个弹性子元素。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性容器 1</div>
<div class="flex-item">弹性容器 2</div>
<div class="flex-item">弹性容器 3</div>
</div>
</body>
</html>
</html>效果：
![WPU@_~W9%Z0S]E4N1Q$UD$V.png](https://img.php.cn/upload/image/830/115/851/1622599371944843.png "1622599371944843.png")
推荐学习：css视频教程
Atas ialah kandungan terperinci css3如何声明盒子弹性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk memulihkan pelayar IE untuk melompat ke EDGE secara automatik
Penyelesaian kepada sambungan gagal antara wsus dan pelayan Microsoft
Pengenalan kepada alat pembangunan perisian
Bagaimana untuk menjalankan kod dengan vscode
Penyelesaian kepada masalah yang perisian muat turun win10 tidak boleh dipasang
penggunaan hartanah
Ringkasan pengetahuan asas java
Kaedah kawalan motor stepper
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
