您现在的位置是：课程教程文章
css中flex-basis的使用
2023-12-14 21:15课程教程文章 人已围观
免费 CSS零基础入门到精通
免费 CSS零基础入门到精通CSS零基础入门到精通-WEB网站制作必学课程 黄菊华老师QQ（微信同号）：4515771...-
H5 CSS3公司移动站界面.三天从零实战（提
H5 CSS3公司移动站界面.三天从零实战（提学会企业站移动站的设计，详细演示请看视频 有问题可以添加老师QQ：45157718；... -
web前端零基础入门h5（HTML5）+CSS3+前端项目
web前端零基础入门h5（HTML5）+CSS3+前端项目视频简介： 1. 掌握HTML的基础语法和常用标签的使用 2. 能够通过HTML完成网页基... -
老马前端系列
老马前端系列课程内容： CSS选择器 CSS布局 CSS选择器 CSS文字排版 CSS盒模型 CSS浮动、定位 C...
概念
1、flex-basis指定了flex元素在主轴方向上的初始尺寸。
2、如果不使用box-sizing来改变盒子模型，则该属性决定了flex元素内容盒的宽度或高度(取决于主轴的方向)的大小。
语法
/* Specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* Intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* Automatically size based on the flex item’s content */ flex-basis: content; /* Global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset;
实例
在列模式下，flex-basis变成了高度，因为容器高度为 100px，这里把子元素高度设置成了 30px 总计 90px 来效果：
.flex {
flex-direction: column;
}
.flex > * {
flex-basis: 30px;
}以上就是css中flex-basis的使用，希望对大家有所帮助。更多css学习指路：css教程
本文教程操作环境：windows7系统、css3版，DELL G3电脑。
课程教程：css中flex-basis的使用下一篇：没有了
