- 上下两端布局
display: flex;
flex-flow: column;//垂直排列
justify-content: space-between;//两端对齐
- 左右两端对齐
display: flex;
align-items: center;
justify-content: space-between;
- 九宫格(适应不同尺寸屏幕)
在一个大盒子里放九个小盒子,大盒子设置样式.body,里面小盒子设置样式.item。小盒子里应把margin值设为百分比的值,不能是数字。给定的数字会导致不适配。
还有一种方法,直接设置小盒子的宽度为width: calc(100% / 3);然后设置padding值即可。
.body {
display: flex;
overflow: hidden;
flex-wrap: wrap;
}
.body .item {
width: 32%;
height: 200px;
margin-right: 1%;
margin-bottom: 14px;
}