Fe-interview: [css] 第476天 使用flex实现一个自适应的九官格
All 7 comments
css部分：
*{
margin: 0;
padding: 0;
}
.jiu {
position: absolute;
margin: 30px 60px;
display: flex;
width: 450px;
height: 459px;
background-color: burlywood;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.jiu li{
background-color:thistle;
width: 33%;
height: 33%;
}
html部分：
<ul class="jiu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ruihengChe
on 4 Aug 2020
<section class="nine-flex-layout">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
.nine-flex-layout {
display: flex;
flex-wrap: wrap;
}
.nine-flex-layout div {
width: calc(100% / 3 - 20px / 3);
height: 80px;
margin: 0 10px 10px 0;
background: skyblue;
}
.nine-flex-layout div:nth-child(3n) {
margin-right: 0;
}
carrie-xin
on 4 Aug 2020
<div class="wrap">
<p class="card"></p>
<p class="card"></p>
<p class="card"></p>
<p class="card"></p>
<p class="card"></p>
<p class="card"></p>
<p class="card"></p>
<p class="card"></p>
<p class="card"></p>
</div>
<style>
.wrap {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 600px;
height: 600px;
border: 1px solid black;
}
.card {
width: calc(33% - 10px);
height: 60px;
background-color: blanchedalmond;
}
</style>
Supremeyh
on 4 Aug 2020
自适应九宫格不难, 大家考虑一下如果只有8个格子, 7个格子也要自适应呢. 类似朋友圈的九图
ramwin
on 4 Aug 2020
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex 九宫格</title>
<style>
body {
background-color: #000;
}
.box {
width: 300px;
height: 300px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: 30px;
}
.item {
width: 98px;
height: 98px;
background-color: skyblue;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<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 class="item"></div>
</div>
<div class="box" style="height: 200px;">
<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>
<div class="box" style="width: 200px;height: 200px;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="box" style="width: 300px;height: 100px;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
xyydd
on 4 Aug 2020
@xyydd 你这个item的宽度是固定的, 要是能自适应box的宽度就更好了
ramwin
on 5 Aug 2020
自适应九宫格不难, 大家考虑一下如果只有8个格子, 7个格子也要自适应呢. 类似朋友圈的九图
不错！！！举一反三
haizhilin2013
on 6 Aug 2020
Related issues
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments