我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

继续学习flex的子元素布局,苏南大叔在本文中主要讲述子元素的尺寸相关属性。主要是如下几个属性:flex-basisflex-growflex-shrinkflex。这些属性都是定义在子元素上面的。请千万别把这些属性放错位置。

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - css-flex-item-size
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图7-1)

本文测试环境:mac/chrome@75.0.3770.100。本文的前提是:父元素display:flex。本文章描述的是子元素的flex属性,常见的值是:flex:1或者flex:autoflex属性分为:flex-growflow-shrinkflex-basis

偷偷的说一句,本文中的例子都没有被折行。所以,可以思考一下设置子元素宽度和盒子元素的相互关系。比如:子元素宽度33.33%,那么三个子元素就折行。

基本代码

测试代码如下:

<div class="box">
    <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:lightgrey;"></div>
</div>
.box {
    width: 350px;
    height: 320px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-direction:column;
}
.box div {
    flex-basis: 40px;
}
.box div:nth-of-type(2) {
    flex-basis: 100px;
}

flex-basis,定义子元素在主轴方向上的宽度或者高度。

  • 主轴(父元素的flex-direction)为row【默认】的话,那么子元素横向排列,flex-basis为宽度,高度随父元素。
  • 主轴(父元素的flex-direction)为column的话,那么子元素纵向排列,flex-basis为高度,宽度随父元素。
  • 设置了flex-basis的话,推荐设置flex-shrinkflex-grow0
  • 设置了flex-basis的话,就不设置width或者height,如果设置的话,冲突以flex-basis为准。

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - flex-basis
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图7-2)

主轴方向flex-direction子元素排列方向子元素flex-basis其它
横向row横向排列宽度高度随父元素
横向column纵向排列高度宽度随父元素

flex-grow扩张

flex-grow属性,定义子元素在主轴方向上所占据的比例,解决占“几”份的问题。因为是grow,其实前提条件就是当父元素在主轴方向上的尺寸(宽度或高度),比对应子元素的尺寸(宽度或高度)的合集还要大的时候,大家如何分摊占据剩余的尺寸。说白了,就是如何占据父元素的剩余空间的一个协议。

  • 默认为0,就是不扩张的意思。
  • 对于主轴为row来说,就是宽度比例。
  • 对于主轴为column来说,就是高度比例。

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - flex-grow
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图7-3)

测试代码:

.box {
  width: 350px;
  height: 320px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction:column;
}

.item:nth-of-type(1) {flex-grow: 1;}
.item:nth-of-type(2) {flex-grow: 3;}
.item:nth-of-type(3) {flex-grow: 1;}
.item:nth-of-type(4) {flex-grow: 1;}
.item:nth-of-type(5) {flex-grow: 1;}

flex-shrink收缩

flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
这个和flex-grow的概念基本类似,在父元素的在主轴方向上的尺寸(宽度或者高度),比所有子元素的尺寸(宽度或者高度)之和还要小的时候。这些子元素就按照约定好的flex-shrink,进行收缩。

说白了,就是子元素如何分担父元素负债部分的一个协议。

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - flex-shrink
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图7-4)

下面是相关例子:

<div class="box">
  <div class="item" style="background-color:red;">A</div>
  <div class="item" style="background-color:lightblue;">B</div>
  <div class="item" style="background-color:yellow;">C</div>
  <div class="item2" style="background-color:brown;">D</div>
  <div class="item2" style="background-color:lightgreen;">E</div>
</div>
.box {
  display: flex;
  width: 360px;
}
.box div {
  flex-basis: 120px;
}
.item { 
  flex-shrink: 1;
}
.item2 { 
  flex-shrink: 2; 
}

这个例子中,flexflex-direction方向是默认的row,就是说横向排列。那么,主要的考虑值就是宽度。而父容器的宽度为360px,子元素宽度为120px,一共为5个元素。所以,缺少的宽度是120*5-360=240

可以理解为父元素负债为240px,将有五个子元素来承担,前三个子元素的flex-shrink1,后两个子元素的flex-shrink2。所以240px将分为(31+22)=7份,每份大约为34像素。那么,前三个元素的宽度为120-34=86像素。后两个的宽度为120-34*2=52,总体的宽度为86*3+52*2=362。因为有小数点存在,所以有2个像素的误差。

flex-shrink取值01的区别

当父容器在子元素的排列方向上的尺寸(宽度或高度)够用的时候,子元素的flex-shrink取值无所谓。但是,一旦发生了不够用的情况,那么,每个子元素都要按照约定好的比例承担差值。

特殊的情况就是flex-shrink取值为0的时候,如果每个子元素都不承担父元素的债务的话,那么父元素就会被撑开,实际尺寸(宽度或高度)就会和父元素的设定不符(父元素的相关设定失效)。

flex

flex 属性是 flex-growflex-shrinkflex-basis 属性的简写属性。默认值:0 1 auto

上述这些flex相关属性,都是定义在子元素上面的!!!

苏南大叔解释一下的话,就是:有好处的时候,大家都很谦虚,都不要。但是有难的时候,大家都默认分担一份。至于自己占多大地方,就看命吧。

flex:1;

等同于:

flex-grow:1;
flex-shrink:1;
flex-basis:0%

不等同于:

flex:0 1 auto;

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - flex-0
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图7-5)

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - flex-1
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图7-6)

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - flex-auto
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图7-7)

总结

关于问题"弹性盒元素需要设置宽高吗?",答案就是:如果设置了flex或者flex-basis,那么设置width或者height都是没有意义的。如果没有设置flex或者flex-basis,那么就愉快的设置widthheight吧~

各位看客,如果您觉得苏南大叔写的还不错的话,麻烦评论转发打赏订阅。谢谢。全部的flex相关文章,请点击下面的苏南大叔的博客链接查看:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    flex