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;}
</span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
height</span><span class="pun">:</span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
align</span><span class="pun">-</span><span class="pln">items</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">-</span><span class="pln">start</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</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-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-shrink示例
如果集合中没有足够的空间，则它指定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。 使用此属性，可以一次将值设置为flex-grow，flex-shrink和flex-basis值。 这是此属性的语法。
.item { flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] }
