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

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

本文测试环境:mac/chrome@75.0.3770.100

flex-basis

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

  • 主轴为row,那么flex-basis就是宽度。主轴为column,那么flex-basis就是高度。
  • 设置了flex-basis的话,推荐设置flex-shrinkflex-grow0
  • 设置了flex-basis的话,就不设置width或者height,如果设置的话,冲突以flex-basis为准。

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

测试代码如下:

<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-grow扩张

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

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

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制宽高尺寸? - flex-grow
网页css布局,flex弹性盒子,子元素如何控制宽高尺寸?(图4-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弹性盒子,子元素如何控制宽高尺寸?(图4-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; 
}

flex

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

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

flex:1;

等同于:

flex-grow:1;
flex-shrink:1;

不等同于:

flex:0 1 auto;

总结

总结总结,终于把flex系列文章写完了,写的苏南大叔气喘吁吁的。各位看客,如果您觉得苏南大叔写的还不错的话,麻烦评论转发打赏订阅。谢谢。

全部的flex相关文章,请点击下面的苏南大叔的博客链接查看:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: