继续学习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或者flex-basis,那么设置width或者height都是没有意义的。如果没有设置flex或者flex-basis,那么就愉快的设置widthheight吧~

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

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

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

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

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

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