引言：
使用 CSS 实现砌墙效果
使用 flex-wrap: wrap 换行后如何让每行元素均匀撑满整行
使用 flex-wrap: wrap 换行后如何给四个角的元素加上圆角
关键样式
.flex-item {
flex-grow: 1; /* 1:1:1 */
}
样式解析：
flex-grow: 1;
意味着所有的 flex 元素都有相同的扩展比例，因此它们将平均分配剩余的空间。
例如，如果你有三个元素，每个元素的 flex-grow 属性都设置为 1，那么每个元素都会接收到剩余空间的三分之一。
砌墙效果代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局</title>
<style>
.flex-container {
width: 300px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flex-item {
background-color: #f0f0f0;
text-align: center;
line-height: 50px;
padding: 2px;
margin: 2px;
flex-grow: 1; /* 1:1:1 */
transition: background-color 0.5s; /* 过渡动画 */
}
.flex-item:hover{
background-color: #c1c1c1;
cursor: pointer;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem</div>
</div>
</body>
</html>
获得四个角的元素，并添加圆角
这个方案目前我只有 js 的实现方式。使用 css 方式只能得到第一个元素和最后一个元素，没能找到获得右上角和左下角元素的方式
关键 JavaScript 代码
/**
* 获取通过flex-wrap换行的所有行
* @param container
* @returns {*[]}
*/
function getLines(container) {
const children = Array.from(container.children);
let top = children[0].getBoundingClientRect().top;
return children.reduce((acc, child) => {
if (child.getBoundingClientRect().top === top) {
acc[acc.length - 1].push(child);
} else {
acc.push([child]);
top = child.getBoundingClientRect().top;
}
return acc;
}, [[]]);
}
const container = document.querySelector('.flex-container');
const lines = getLines(container);
console.log(lines);
// 获取四个角, top-left, top-right, bottom-left, bottom-right
const nooks = [
lines[0][0],
lines[0][lines[0].length - 1],
lines[lines.length - 1][0],
lines[lines.length - 1][lines[lines.length - 1].length - 1]
];
nooks[0].classList.add('border-radius-top-left');
nooks[1].classList.add('border-radius-top-right');
nooks[2].classList.add('border-radius-bottom-left');
nooks[3].classList.add('border-radius-bottom-right');
圆角 css 的代码：
/* 下面的 css 是设置圆角的，由 js 添加样式 */
:root {
--border-radius: 8px;
}
.border-radius-top-left {
border-top-left-radius: var(--border-radius);
color: red;
}
.border-radius-top-right {
border-top-right-radius: var(--border-radius);
color: red;
}
.border-radius-bottom-left {
border-bottom-left-radius: var(--border-radius);
color: red;
}
.border-radius-bottom-right {
border-bottom-right-radius: var(--border-radius);
color: red;
}
下面是完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局</title>
<style>
.flex-container {
width: 300px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flex-item {
background-color: #f0f0f0;
text-align: center;
line-height: 50px;
padding: 2px;
margin: 2px;
flex-grow: 1; /* 1:1:1 */
transition: background-color 0.5s; /* 过渡动画 */
}
.flex-item:hover{
background-color: #c1c1c1;
/* 改变鼠标样式为手 */
cursor: pointer;
}
/* 下面的 css 是设置圆角的，由 js 添加样式 */
:root {
--border-radius: 8px;
}
.border-radius-top-left {
border-top-left-radius: var(--border-radius);
color: red;
}
.border-radius-top-right {
border-top-right-radius: var(--border-radius);
color: red;
}
.border-radius-bottom-left {
border-bottom-left-radius: var(--border-radius);
color: red;
}
.border-radius-bottom-right {
border-bottom-right-radius: var(--border-radius);
color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem ipsum</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem ipsum dolor</div>
<div class="flex-item">Lorem</div>
</div>
<script>
/**
* 获取通过flex-wrap换行的所有行
* @param container
* @returns {*[]}
*/
function getLines(container) {
const children = Array.from(container.children);
let top = children[0].getBoundingClientRect().top;
return children.reduce((acc, child) => {
if (child.getBoundingClientRect().top === top) {
acc[acc.length - 1].push(child);
} else {
acc.push([child]);
top = child.getBoundingClientRect().top;
}
return acc;
}, [[]]);
}
const container = document.querySelector('.flex-container');
const lines = getLines(container);
console.log(lines);
// 获取四个角, top-left, top-right, bottom-left, bottom-right
const nooks = [
lines[0][0],
lines[0][lines[0].length - 1],
lines[lines.length - 1][0],
lines[lines.length - 1][lines[lines.length - 1].length - 1]
];
nooks[0].classList.add('border-radius-top-left');
nooks[1].classList.add('border-radius-top-right');
nooks[2].classList.add('border-radius-bottom-left');
nooks[3].classList.add('border-radius-bottom-right');
</script>
</body>
</html>
