这篇文章给大家分享的是“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的概念怎么理解，如何使用"的内容，大家可以关注群英网络的其它相关文章。

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

猜你喜欢

• CSS中margin外边距如何设置，要点有哪些

  css外边距margin的介绍：1、用来增加元素间距的，外边距跟边框一样，分为上、右、下、左4个方向的边距。2、margin可以沿着四个不同的方向(top,right,bottom,left)添加。

• CSS中怪异盒模型是什么，怎么应用

  css怪异盒模型的介绍：1、怪异盒设置的width/height不仅包含了content盒子内容的宽度/高度，还包含了padding和border的宽度/高度。2、一个块的总宽度= width + margin(左右)。

• CSS盒子模型属性有哪些，用法是怎样

  本篇文章给大家带来了css中关于盒子模型的诸多属性详细解析，其中包括边框、边距、圆角等等，希望对大家有帮助。

• CSS层叠如何理解和应用，使用要注意什么？

  这篇文章给大家分享的是CSS层叠的相关内容，本文介绍了CSS层叠是什么，层叠等级以及，z-index 对层叠等级的影响，对大家学习会有一定的帮助，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• CSS页面中实现底部固定的方式有多少种

  这篇文章主要介绍了详解八种方法实现CSS页面底部固定的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧