flex-basis与width、min-width、max-width的关系
前置条件:flex-basis是针对使用flex布局的主轴宽度做设置的,所以如果flex-direction是column时,与flex-basis相关的是height、min-height和max-height,情况同width。以下均是flex-direction为row时的情况。
1、当设置了flex-basis时,内容宽度就是flex-basis值,与width无关,但与max-width和min-width有关。
.flex-item {
flex-basis: 80px;
width: 60px;
}
// 以上最终内容宽度为80px
-----------------------------
.flex-item {
flex-basis: 80px;
max-width: 60px;
}
// 以上最终内容宽度为60px
-----------------------------
.flex-item {
flex-basis: 80px;
max-width: 160px;
}
// 以上最终内容宽度为80px
-----------------------------
.flex-item {
flex-basis: 80px;
min-width: 160px;
}
// 以上最终内容宽度为160px
-----------------------------
.flex-item {
flex-basis: 80px;
min-width: 60px;
}
// 以上最终内容宽度为80px
2、flex-basis在绝对定位的内容块上无法生效,最终内容宽度为width控制
.flex-container { // 外层容器
display: flex;
position: relative;
}
.flex-item { // 内容块
position: absolute;
flex-basis: 80px;
width: 60px;
}
// 以上最终内容宽度为60px