Изменение 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-basis изгибаемых элементов на экране мобильного телефона и планшета. Обычно количество строк должно быть 4, а в планшете - 3, тогда на мобильном телефоне - 2.

Answer 1

Вы ошиблись, приятель. Я предположил, что вам нужна максимальная ширина, чтобы сделать ее не полностью широкой, если элемент всего 1.

Удалите max-width и flex:1, и вы должны быть хорошими.

flex: 1 является избыточным flex-basis: calc(100% / 4);.

. flex: 1 сделает элемент полностью широким на 100%, а вы скажете ему разделить элементы на 4 группы / 3 группы / 2 группы, используя flex-basis: calc(100% / 4); так что 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;
	}
}

Answer 2

Вам нужно только удалить максимальную ширину: 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>