CSS 如何使灵活项目的长度与内容无关

让我们试着理解flex属性。Flex是一个设置flex元素长度的简写属性，它可以根据内容的多少或视口宽度自动调整自身的长度。

Flex属性

flex属性的组成属性如下所示：

Flex-grow

此属性设置在flex容器中剩余空间中分配给项目的空间量。换句话说，它决定了项目的主尺寸是否允许超出。此属性的值为整数。

空余空间的大小等于flex容器的尺寸减去所有flex元素的尺寸之和。如果所有兄弟项目具有相同的flex增长因子，则它们将接收相同数量的剩余空间；否则，将根据各个flex增长因子设置的比例进行分配。
此属性的初始值为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>