关注我们

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>

它将产生以下输出-

如果集合中有多余的空间，它会指定一个特定的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>

它将产生以下输出-

如果集合中没有足够的空间，则它指定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>

它将产生以下输出-

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

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

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

技术教程推荐

Python自动化办公实战课 -〔尹会生〕

说透5G -〔杨四昌〕

深入C语言和程序运行原理 -〔于航〕

JavaScript进阶实战课 -〔石川〕

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

Flexbox - flexibility属性

flex-basis示例

flex-grow示例

flex-shrink示例

flex示例