关注我们

Flexbox - flexibility属性

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>

它将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flexibility.html

来源：LearnFk无涯教程网

如果集合中有多余的空间，它会指定一个特定的flex-item应该增长多少。

复制代码

: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>

它将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flexibility.html

来源：LearnFk无涯教程网

如果集合中没有足够的空间，则它指定flex-item应收缩多少。

复制代码

: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>

它将产生以下输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flexibility.html

来源：LearnFk无涯教程网

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

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

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

零基础学Python -〔尹会生〕

深入剖析Kubernetes -〔张磊〕

iOS开发高手课 -〔戴铭〕

OpenResty从入门到实战 -〔温铭〕

好记忆不如烂笔头。留下您的足迹吧 :)

Flexbox - flexibility属性

flex-basis示例

flex-grow示例

flex-shrink示例

flex示例