品易云推流 关闭
文章 > css教程 > css中flex-basis的使用

css中flex-basis的使用

css

头像

小妮浅浅

2021-04-23 16:43:54344浏览 · 0收藏 · 0评论

1、概念

flex-basis指定了flex元素在主轴方向上的初始尺寸。如果不使用box-sizing来改变盒子模型,则该属性决定了flex元素内容盒的宽度或高度(取决于主轴的方向)的大小。

2、语法

/* 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;

3、实例

在列模式下,flex-basis变成了高度,因为容器高度为 100px,这里把子元素高度设置成了 30px 总计 90px 来效果:

.flex {
  flex-direction: column;
}
 
.flex > * {
  flex-basis: 30px;
}

以上就是css中flex-basis的使用,希望对大家有所帮助。更多css学习指路:css教程

关注公众号

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图 底部广告图按钮