数据结构
网络
关系数据库管理系统 (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
