flex多栏布局
Posted zgdawdl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex多栏布局相关的知识,希望对你有一定的参考价值。
<style> .container { width: 1200px; margin: 0 auto; display: flex; } .container>div { width: 380px; /* 也可以设置flex分配父容器宽度,再用padding设置相邻元素的间距 */ height: 200px; /* 水平居中 */ margin: 0 auto; } .container>div:first-of-type { background-color: red; } .container>div:nth-of-type(2) { background-color: green; } .container>div:last-of-type { background-color: blue; } </style>
<div class="container"> <div>第一列</div> <div>第二列</div> <div>第三列</div> </div>
以上是关于flex多栏布局的主要内容,如果未能解决你的问题,请参考以下文章