Effect example picture
the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.flex-wrap {
border: 1px solid red;
width: 1200px;
margin: 12px auto;
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid red;
width: 100px;
height: 100px;
}
.flex-item:nth-of-type(3) {
margin-left: auto;
}
.form-label {
border: 1px solid red;
width: 1200px;
margin: 12px auto;
display: flex;
align-items: center;
font-size: 16px;
color: #333;
}
.form-label span:has(+input[required])::after {
content: "*";
color: #ff0000;
}
.form-label input {
border: 1px solid #dcdcdc;
width: 200px;
height: 30px;
padding: 0px 12px;
margin-left: 12px;
}
.flex-item2 {
--n: 6;
--width: 160px;
--gap: calc((100% - var(--width)*var(--n)) / var(--n) / 2);
border: 1px solid red;
width: var(--width);
height: 200px;
margin: 12px var(--gap);
}
</style>
</head>
<body>
<div class="flex-wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
<label class="form-label">
<span>姓名</span>
<input required type="text" placeholder="请输入姓名" />
</label>
<div class="flex-wrap">
<div class="flex-item2">1</div>
<div class="flex-item2">2</div>
<div class="flex-item2">3</div>
<div class="flex-item2">4</div>
<div class="flex-item2">5</div>
<div class="flex-item2">6</div>
<div class="flex-item2">7</div>
<div class="flex-item2">8</div>
<div class="flex-item2">9</div>
<div class="flex-item2">10</div>
</div>
</body>
</html>