CSS3 Flex布局中项目的flex-basis

最新推荐文章于 2024-07-31 12:16:44 发布

yj&zsx

最新推荐文章于 2024-07-31 12:16:44 发布

阅读量287

点赞数 1

分类专栏： CSS3 Flex布局

本文链接：https://blog.csdn.net/qq_34829911/article/details/89331460

版权

CSS3 Flex布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Flex布局语法地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex布局实战地址：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html?bsh_bid=683103006（转载自阮一峰老师的博客）

（如果不理解下面的知识点，可以先去阅读以上地址）
一、知识点
1、flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。
2、flex-basis值默认为auto,即项目的本身大小（width和height值）
二、心德
flex-basis是相对于主轴来定义的，由于主轴是根据flex-direction的变化而变化的。
当flex-direction为 row的时候，设置flex-basis值相当于是设置项目的width。
当flex-direction为column时，设置flex-basis相当于是设置项目的height。