在 CSS 中，如何让弹性项目无论其内容如何都能保持相同的长度?
让我们尝试理解 flex 属性。flex 是一个简写属性，用于设置弹性元素的长度条件，即是否允许其根据内容量或视口宽度进行调整。
弹性属性
flex 属性 的组成属性如下所示 -
flex-grow
此属性设置分配给弹性项目的空间，该空间占弹性容器剩余空间的比重。换句话说，它设置是否允许弹性项目的主尺寸超出其范围。此属性的值是一个整数。
剩余空间等于弹性容器的大小减去所有弹性元素大小之和。如果所有同级弹性项目具有相同的弹性增长因子，则它们将获得相同的剩余空间;否则，将根据各个弹性增长因子设定的比例进行分配。
此属性的初始值为 0。它适用于弹性盒中的所有项目，也包括伪元素。它本质上不可继承，其动画类型为数字。
Flex-shrink
正如 flex-grow 属性允许弹性盒增长一样，当内容无法适应指定的空间时，此属性允许弹性项目收缩。
此属性的初始值为 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 中创建等长弹性框元素。
<!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"等一系列属性，使弹性项目无论其内容如何，长度都保持一致。这种灵活性在设计响应式网站时非常有用，因为网站需要根据用户浏览的设备调整大小。通过使用这些属性，设计师可以创建无论在什么设备上浏览都能呈现美观的布局。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
