您的位置:首页> 前端教程> CSS3教程
文章导航

CSS flex-basis

2019-4-11 00:25| 作者: admin| 查看: 556| 评论: 0|来自: 蚂蚁部落

display:flex 弹性布局一章节对弹性布局进行了概括介绍。

上述文章能够让读者在总体上对弹性布局有一个基本的认识与把握。

但是如果要熟练应用,则需要对弹性布局涉及的相关属性有比较深入的了解。

本文将通过代码实例详细介绍一下flex-basis属性的用法。

一.弹性布局概括:

实质上弹性布局规定的是容器与子项目之间的关系。

给元素设置display:flex,它会变成容器,内部的子项目会根据为其设置的属性进行布局。

再通俗一点讲,就是子项目如何分配容器的空间,更多的时候是分配容器的"剩余空间"。

所谓剩余空间就是在主轴方向,除去项目所占据的空间后,所剩余的空间。

二.flex-basis属性:

理解此属性可以从其名称入手,flex表示它是弹性布局的属性,basis翻译成汉语具有"基准"或者"基础"的意思。

名副其实,此属性用于规定在分配多余空间之前,项目占据的主轴空间,也就是为项目设定一个最初的基准尺寸。

既然是一个基准尺寸,那么也就意味着可以在这个尺寸基础上进行扩展或者收缩,后面会有介绍。

语法结构:

[CSS] 纯文本查看 复制代码
flex-basis: number|auto|initial|inherit;

属性值说明:

(1).number:长度单位或者百分比,规定flex项目的初始长度。

(2).auto:默认值,长度等于flex项目本身长度,如果项目未指定长度,根据内容决定。

(3).initial:flex项目默认方式显示,可以参阅CSS initial属性一章节。

(4).inherit:从父元素继承该属性。

三.代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main{
  width:350px;
  height:100px;
  background:#ccc;
  display:flex;
}
#main div{flex-basis:40px;}
#main div:nth-of-type(2){flex-basis:80px;}
</style>
</head>
<body>
  
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:green;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/002623uasyht4yds8s99sf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过flex-basis属性设置第一、第三、第四和第五个div长度为40px,第二div长度为80px。

此时它的作用与width是一直的,关于两者区别可以参阅flex-basis与width区别一章节。

可以看到容器还有剩余的空间,那么我们可以在通过flex-basis属性设置的"基准"尺寸的基础上进行扩展。

下面看一个代码实例,演示了如何在"基准"尺寸的基础上瓜分容器剩余空间,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main{
  width:350px;
  height:100px;
  background:#ccc;
  display:flex;
}
#main div{flex-basis:40px;}
#main div:nth-of-type(2){
  flex-basis:80px;
  flex-grow:1;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:green;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/002654wz7p9mevm4rmgjxg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二个div会占据所有的剩余空间,通过flex-grow属性实现对剩余空间再分配功能。

关于flex-grow属性的具体用法,本文不再介绍,具体参阅CSS flex-grow一章节。

当然也可能子项目的总尺寸会超过容器,那么就要收缩,具体参阅CSS flex-shrink一章节。

四.max-width与min-width的限制:

flex-basis属性并不能为所欲为,它的最大值和最小值可以被上述两个属性限制。

也就是说,flex-basis最大值不会超过max-width规定的值,flex-basis最小值不会小于min-width规定的值。

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main{
  width:350px;
  height:100px;
  background:#ccc;
  display:flex;
}
#main div{flex-basis:40px;}
#main div:nth-of-type(2){
  flex-basis:80px;
  max-width: 20px;
}
#main div:nth-of-type(3){
  flex-basis:10px;
  min-width: 60px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:green;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/002739zlgjl6dbd7xlr7gj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码通过分别通过max-width与min-width限制了flex-basis规定的值。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS flex下一篇:CSS flex-grow 属性

最新评论

返回顶部