根据不同的屏幕大小更改Flex-Basis

Question

我想知道为什么这个不起作用。

​

#parent {
  display: flex !important;
	flex-flow: row wrap;
  width: 100% !important;
	justify-content: flex-start;
}
.item{
	flex: 1 !important;
	flex-basis: calc(100% / 4);
	box-sizing: border-box ;
	border: solid 1px #000000;
	margin-bottom: 30px !important;
	max-width: 24%;
  height: 50px;
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
	.item{
		flex-basis: calc(100% / 3) !important;
	}
}

@media screen and (max-width: 479px) {
/* start of phone styles */
	.item{
		flex-basis: calc(100% / 2) !important;
	}
}

<div id="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

​

我想在手机和平板电脑屏幕上更改flex项目的flex-basis。通常，行项目应该是4，在平板电脑中应该是3，那么在移动设备上应该是2。

Answer 1

你只需要移除max-width: 24%

​

#parent {
  display: flex !important;
	flex-flow: row wrap;
  width: 100% !important;
	justify-content: flex-start;
}
.item{
	flex: 1 !important;
	flex-basis: calc(100% / 4);
	box-sizing: border-box ;
	border: solid 1px #000000;
	margin-bottom: 30px !important;
  height: 50px;
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
	.item{
		flex-basis: calc(100% / 3) !important;
	}
}

@media screen and (max-width: 479px) {
	.item{
		flex-basis: calc(100% / 2) !important;
	}
}

<div id="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

​

Answer 2

你搞错了，伙计。我假设如果项目只有1，你需要最大宽度来使它不完全宽。

去掉max-width和flex:1，你就可以正常工作了。

flex: 1是flex-basis: calc(100% / 4);的冗余。

当你告诉flex: 1使用flex-basis: calc(100% / 4);将项目分成4组/3组/2组时，max-width和flex: 1就不再有意义了。

​

#parent {
	display: flex !important;
	flex-flow: row wrap;
	width: 100% !important;
	justify-content: flex-start;
}
.item{
	flex-basis: calc(100% / 4);
	box-sizing: border-box ;
	border: solid 1px #000000;
	margin-bottom: 30px !important;
	height: 50px;
}

/* For tablet */
@media screen and (max-width: 767px) {
	.item{
		flex-basis: calc(100% / 3) !important;
	}
}

/* For mobile */
@media screen and (max-width: 479px) {
	.item{
		flex-basis: calc(100% / 2) !important;
	}
}

​