1. 栅格布局
栅格布局常见有12,或24栅格,根据每个div的栅格数量,得到宽度占比。
平时可以利用一些栅格布局组件, 如antd的Row,Col
// antd采用24栅格, span={8}可根据分辨率自己调整
<Row gutter={16}> <Col span={8} /> <Col span={8} /> <Col span={8} /> </Row>
2. 弹性布局
2.1 单行数据
html: <ul> <li>card 1</li> <li>card 2</li> </ul>
css:
ul {
display: flex;
justify-content: space-between;
width: 100%;
}
li {
flex: 1;
}
2.2 多行数据
不加占位标签:
html <div> <ul> <li>card 1</li> <li>card 2</li> <li>card 3</li> </ul> <ul> <li>card 4</li> <li style={{visibility: 'hidden'}}>empty</li> // 占位li, 可根据数据格式动态扩展 <li style={{visibility: 'hidden'}}>empty</li> </ul> </div>
css:
div {
width: 100%;
}
ul {
display: flex;
justify-content: space-between;
}
li {
flex: 1;
}
2.3 每行列数固定, 可用
扫描二维码关注公众号,回复:
6839659 查看本文章
<div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> .box { display: flex; justify-content: space-between; flex-wrap: wrap; } .box:after { content: ""; flex: auto; }