liang14658fox

Appearance

1. 普通flex布局 ​

使用flex依次摆放展示卡片类型的盒子，应用场景：可以展示电影卡片，传感器卡片，人物，集换式卡片等。

有两个缺点不能接受：

  • 当页面宽度变窄时，元素也会变窄，且只有一行，过窄非常难看，子元素如果有图片和文字那就更不用说了。
  • 没有换行。
css
.flex_container {
	display: flex; /* 父元素flex布局 */
	background-color: #f1f1f1;
}
.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	width: 200px;  /* 固定宽度！ */
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
}
.flex_container {
	display: flex; /* 父元素flex布局 */
	background-color: #f1f1f1;
}
.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	width: 200px;  /* 固定宽度！ */
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
}
html
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

2. flex布局+自动换行 ​

给父级元素添加自动换行样式。

此时

  • 元素不会塞满横向宽度
css
.flex_container {
	display: flex;
	background-color: #f1f1f1;
	/* 给父级元素添加以下样式 */
	justify-content: flex-start; /* 设置flex-start */
	flex-direction: row; /* 从左到右 */
	flex-wrap: wrap; /* 启动换行 */
}
.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	width: 200px;
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
}
.flex_container {
	display: flex;
	background-color: #f1f1f1;
	/* 给父级元素添加以下样式 */
	justify-content: flex-start; /* 设置flex-start */
	flex-direction: row; /* 从左到右 */
	flex-wrap: wrap; /* 启动换行 */
}
.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	width: 200px;
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
}
html
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

3. flex布局+自动换行+填满横向页面宽度 ​

将子元素的width换为min-width，并且设置flex：1的属性。这样可以让元素横向塞满父级元素的每一行。

即使这样

  • 最下面那一行的元素也会自动变长且塞满，明显这样我们并不满意。
css
.flex_container {
	display: flex;
	background-color: #f1f1f1;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	/* width: 200px; */ /* 不需要固定宽度 */
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
	cursor: pointer;
	flex: 1; /* 必须设置！ */
	min-width: 200px;/* 设置最小宽度min-width！ */
}
.flex_container {
	display: flex;
	background-color: #f1f1f1;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	/* width: 200px; */ /* 不需要固定宽度 */
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
	cursor: pointer;
	flex: 1; /* 必须设置！ */
	min-width: 200px;/* 设置最小宽度min-width！ */
}
html
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

4. 完美布局 ​

解决00.3布局的方法如下：添加空div，将空div的高度设置为零，其余样式和之前的子元素一样。

空div的数量需要计算，数量等同于一行可以容正常的数量。

设置完之后，整体card会根据min-width自动塞满整个父级元素。

html
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<!-- 添加空元素，防止最后一行元素拉伸 -->
	<div class="empty_card"></div>
	<div class="empty_card"></div>
	<div class="empty_card"></div>
	<div class="empty_card"></div>
	<div class="empty_card"></div>
</div>
<div class="flex_container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<!-- 添加空元素，防止最后一行元素拉伸 -->
	<div class="empty_card"></div>
	<div class="empty_card"></div>
	<div class="empty_card"></div>
	<div class="empty_card"></div>
	<div class="empty_card"></div>
</div>
css
.flex_container {
	display: flex;
	background-color: #f1f1f1;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	/* width: 200px; */ /* 不需要 */
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
	cursor: pointer;
	flex: 1;
	min-width: 200px;
}

.empty_card {
	height: 0;
	margin-top: 0; 	/* 宽度和高度都设置为0，不占用空间 */
	margin-right: 18px; /* 不可以忘记margin，否则有可能对不齐 */
}
.flex_container {
	display: flex;
	background-color: #f1f1f1;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.flex_container>div {
	background-color: DodgerBlue;
	color: white;
	/* width: 200px; */ /* 不需要 */
	margin: 10px;
	text-align: center;
	line-height: 75px;
	font-size: 30px;
	cursor: pointer;
	flex: 1;
	min-width: 200px;
}

.empty_card {
	height: 0;
	margin-top: 0; 	/* 宽度和高度都设置为0，不占用空间 */
	margin-right: 18px; /* 不可以忘记margin，否则有可能对不齐 */
}