CSS 如何使灵活的项目无论其内容如何都有相同的长度

让我们试着了解一下flex属性。Flex是一个简明的属性，它为柔性元素的长度设定了条件，即是否允许它根据其内容的多少或视口的宽度来调整自己。

Flex属性

Flex属性的组成属性规定如下

Flex-grow

该属性设置了在flex-container中剩余的所有空间中分配给该项目的空间。换句话说，它设置了项目的主要尺寸是否会被允许超越增长。这个属性的值是一个整数。

空白空间的数量等于柔性容器的大小减去所有柔性元素的大小之和。如果所有的兄弟项目都有相同的flex增长因子，那么它们将获得相同的剩余空间量；否则，它将根据各种flex增长因子设定的比例进行分配
此属性的初始值为0。它适用于flexbox中的所有项目，也包括伪元素。它在本质上是不可继承的，并且有一个数字作为其动画类型。

Flex-shrink

正如flex-grow属性允许flexbox增长一样，该属性允许flexitems在内容无法容纳到指定空间的情况下收缩。

该属性的初始值为1，而不是0。它也会被应用于flexbox中的所有项目，也包括伪元素。就像flex-grow一样，这个属性在本质上也是不可继承的，并且有一个数字作为其动画类型。

Flex-base

该属性用于指定容器最初的主要尺寸是什么。除非与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属性来控制灵活元素的大小。因此，如果我们必须使所有的柔性项目具有相同的长度，我们将利用这个属性。

例子

下面的例子使用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>