flex-basis与width、min-width、max-width的关系

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