Question

我想知道为什么这行不通。

let string_n_times s n =
  let str = ref "" in
  for i = 1 to n do
    str := !str ^ s
  done; !str

let () = print_endline (string_n_times "hi" 5)

#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>。通常，行项目应为4，而在平板电脑中，行项目应为3，然后在移动设备上应为2。

Answer 1

您只需要删除最大宽度：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使其不完全宽。

删除max-width和flex:1，您应该会很好。

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

flex: 1将使项目完全变宽100％，同时您告诉它使用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;
	}
}

在不同的屏幕尺寸上更改Flex-Basis

2 个答案: