flex-basis与width区别

2019-4-12 18:34| 作者: admin| 查看: 1428| 评论: 0|来自: 蚂蚁部落

越是功能相近的属性越需要精准的掌握它们之间的区别,否则应用的时候可能会出现各种问题。

标题中两个属性在某些时候表现完全相同,具有相当的迷惑性,当然两者是有本质区别的。

关于标题中两个属性的基本知识可以参阅如下两篇文章:

(1).flex-basis属性可以参阅CSS flex-basis一章节。

(2).width属性可以参阅CSS max-width/min-width设置元素尺寸一章节。

下面通过代码实例详细分析一下两者的区别,首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
.top,.bottom{
  width:150px;
  height:60px;
  background:#ccc;
  display:flex;
  margin:5px;
}
.top div{flex-basis:40px;}
.top div:nth-of-type(2){
  flex-basis:80px;
}

.bottom div{
  width:40px;
}
.bottom div:nth-of-type(2){
  width:80px;
}
</style>
</head>
<body>
<div class="top">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
</div>
<div class="bottom">
    <div style="background-color:coral;"></div>
    <div style="background-color:lightblue;"></div>
  </div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/184731rr3f8vw6z9e9vh3e.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,两个属性的表现完全一样,当然两者是有区别的,否则两个属性就没必要同时存在。

首先总结一下两个属性最为明显的区别:

(1).flex-basis属性优先级高于width属性,所以在弹性布局中只使用flex-basis属性即可(注意后面分析,此阐述不完全正确)。

(2).各主流浏览器都支持width属性,但是只有IE10+和其他标准浏览器支持flex-basis属性。

(3).flex-basis属性只能用于弹性布局中,width适用范围比较广既可以在弹性布局,也可以在非弹性布局。

上面罗列了两个属性的三个区别,但是并未涉及到两者的本质区别,flex-basis规定的是项目的尺寸,但并不代表规定的必定是项目的宽度。flex-basis实质上规定的是主轴方向,项目的尺寸,并不能一概以宽度来论,因为主轴不但可以水平方位,也可以是垂直方位,width则是实实在在规定元素的宽度。

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 140px;
  height: 300px;
  background:#ccc;
  display: flex;
  flex-direction: column;
}
#main div {
  width: 70px;
  flex-basis:140px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:blue;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/184758lfpws6f0i0ci0f0c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过flex-direction: column将容器的主轴由水平方向修改为垂直方位。

(2).通过width设置项目的宽度为70px。

(3).设置flex-basis属性值为140px,可以看到项目的尺寸并没有变为140px。

(4).所以,我们不能说flex-basis是用来设置宽度的,它是设置主轴方向项目的尺寸,上面代码因为主轴是垂直的,所以此属性看起来是设置项目的高度,此时它的优先级要高于height属性。

通过上面的介绍,可以看到两个属性是有本质区别的,一个是设置主轴方向项目的尺寸(不一定是宽度),一个是实实在在设置元素的宽度,理解这一点,那么应用中就不会再有什么问题了,如果对文本有任何问题和疑问,可以在文章底部留言,本站会第一时间回复。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部