CSS中flex-basis的概念怎么理解，如何使用-群英

上一篇：CSS内边框是指什么，如何设置修改下一篇：flex的排列方式有哪些，代码是什么

这篇文章给大家分享的是“CSS中flex-basis的概念怎么理解，如何使用”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

概念

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;
}

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"CSS中flex-basis的概念怎么理解，如何使用"的内容，大家可以关注群英网络的其它相关文章。

标签： flex-basis

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS内边框是指什么，如何设置修改下一篇：flex的排列方式有哪些，代码是什么