灵活性（Flexibility）

优质

小牛编辑

125浏览

2023-12-01

flex-basis

我们使用flex-basis属性在分配空间之前定义flex-item的默认大小。

以下示例演示了flex-basis属性的用法。在这里，我们创建了3个彩色盒子，并将它们的尺寸固定为150像素。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:150px; }
      .box2{background:blue; flex-basis:150px;}
      .box3{background:red; flex-basis:150px;}
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

flex-grow

我们使用flex-grow属性来设置flex-grow因子。如果容器中有多余的空间，它指定特定的柔性项目应该增长多少。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-grow:10; flex-basis:100px; }
      .box2{background:blue; flex-grow:1; flex-basis:100px; }
      .box3{background:red; flex-grow:1; flex-basis:100px; }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

flex-shrink

我们使用flex-shrink属性来设置flex shrink-factor 。如果容器中没有足够的空间，则指定Flex项目应缩小的程度。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:200px; flex-shrink:10}
      .box2{background:blue; flex-basis:200px; flex-shrink:1}
      .box3{background:red; flex-basis:200px; flex-shrink:1}
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

柔性

有一个简写，可以同时为所有这三个属性设置值; 它被称为flex 。使用此属性，可以一次将值设置为flex-grow，flex-shrink和flex-basis值。以下是此属性的语法。

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}