个人博客

Appearance

九宫格布局 ​

1. flex 实现响应式九宫格布局 ​

代码：

html
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.box {
				display: inline-block;
				width: 380px;
				border: 1px solid red;
				padding: 10px 5px 0;
			}
			.box.flex > ul {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
			.item {
				width: calc(100% / 3 - 10px);
				border: 1px solid green;
				margin: 0 5px 10px;
				height: 100px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box flex">
			<ul class="wrapper">
				<li class="item">asdfasdfa asdfsadjjs df sdf oasd f sdfjqsdjkaspo sdf oasd f sdfjqsdj sdf oasd f sdfjqsdj</li>
				<li class="item">2</li>
				<li class="item">3</li>
				<li class="item">4</li>
				<li class="item">5</li>
				<li class="item">6</li>
				<li class="item">7</li>
				<li class="item">8</li>
				<li class="item">9</li>
			</ul>
		</div>
	</body>
</html>

原理：

​ 利用 flex 布局下子元素都变成 block，然后设置其宽度为 calc(100% / 3 - gutter)

​ 第二： 利用容器内边距为 gutter/ 2 加上 item 的 margin 来实现每一个子元素的左右边距 gutter

那么我们如果需要两边边距为 0 哪？ ​

image-20200623104054477

这时候我们借助于justify-content:space-between;

.justify-content 属性

取值：

flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，

  • 默认 flex-start 即左对齐，
  • center 为居中
  • flex-end 为右对齐。
  • space-between 为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
  • space-around 为项目之间间距为左右两侧项目到容器间距的 2 倍，比较特别的布局，日常使用不太多。
  • space-evenly 为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右 margin

那么这时候我们就只要设置每一个元素的宽度为 width : calc((100% - 30px) / 4);，其剩余的空间 30px 就自动平均分配给元素见的间距(3 块，每一块 10px)

代码

html
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				padding: 50px;
			}
			.box {
				display: inline-block;
				width: 380px;
				border: 1px solid red;
				padding: 0;
				margin-left: -5px;
				margin-right: -5px;
			}
			.box.flex > ul {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: -10px;
			}
			.item {
				width: calc((100% - 30px) / 4);
				border: 1px solid green;
				height: 100px;
				overflow: hidden;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box flex">
			<ul class="wrapper">
				<li class="item">asdfasdfa asdfsadjjs df sdf oasd f sdfjqsdjkaspo sdf oasd f sdfjqsdj sdf oasd f sdfjqsdj</li>
				<li class="item">2</li>
				<li class="item">3</li>
				<li class="item">4</li>
				<li class="item">5</li>
				<li class="item">6</li>
				<li class="item">7</li>
				<li class="item">8</li>
				<li class="item">9</li>
				<li class="item">10</li>
				<li class="item">11</li>
				<li class="item">12</li>
				<li class="item">13</li>
				<li class="item">14</li>
				<li class="item">15</li>
				<li class="item">16</li>
			</ul>
		</div>
	</body>
</html>

grid 布局 ​

兼容性问题是一塌糊涂，不要使用

css
.box.flex > ul {
	/* 设置容器为 grid 布局 */
	display: grid;
	/* 拆分子项目为4行 每行等分  1fr 2fr.. 代表2fr的行为1fr的两倍 */
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(4, 1fr);
	/* 设置每一行每一列的间距为10px */
	grid-row-gap: 10px;
	grid-column-gap: 10px;
}
.item {
	/* width: calc((100% - 30px) / 4); */
	border: 1px solid green;
	height: 100px;
	overflow: hidden;
	margin-bottom: 10px;
}