flex弹性布局:产品列表均匀分布代码实例

2020-06-0606:24:44网页设计Comments3,990 views字数 663阅读模式

实际应用中十分常见的布局效果,尤其是在产品展示类型网站。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/19419.html

下面就通过flex弹性布局来实现此功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/19419.html

代码实例如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/19419.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  width: 550px;
  margin:0 auto;
  background-color:#B4D3F7;
}
li {
  width: 120px;
  height: 120px;
  background: #F7E8B4;
  margin:10px 0;
}
</style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

代码实现产品贴壁均匀排列的效果,代码比较简单具体参阅相关阅读。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/19419.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/sheji/19419.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定