想要让网页元素的间距均匀,那么在CSS中就需要使用一些方法来实现平均分布。下面介绍几种方法:/* 自动浮动布局 */ .container { display: flex; flex-wrap: wr
想要让网页元素的间距均匀,那么在CSS中就需要使用一些方法来实现平均分布。下面介绍几种方法:
/* 自动浮动布局 */ .container { display: flex; flex-wrap: wrap; } .container > * { flex: 1 1 0; } /* 百分比布局 */ .container { font-size: 0; } .container > * { display: inline-block; box-sizing: border-box; width: 33.333333%; font-size: 16px; } /* 弹性布局 */ .container { display: flex; justify-content: space-between; align-items: center; } .container > * { flex-grow: 1; } /* 网格布局 */ .container{ display: grid; grid-template-columns: repeat(3, 1fr); } .container > * { grid-row: 1/2; }
以上几种方法都可以实现元素的平均分布,根据具体需要选择其中一种即可。
粉丝
0
关注
0
收藏
0