CSS3 弹性布局
一个示例:子元素垂直排列
二个示例:子元素水平垂直居中
三个示例:子元素三个三列九宫格
<style> .father { display: flex; /* 默认子元素水平排列 */ flex-direction: column; /* 垂直排列 */ } .son { width: 100px; height: 100px; border: 1px solid red; } </style> <body> <div class="father"> <div class="son"></div> <div class="son"></div> <div class="son"></div> </div> </body>
二个示例:子元素水平垂直居中
<style> .father { width: 300px; height: 300px; border: 1px solid red; display: flex; /* 父元素弹性布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } .son { width: 100px; height: 100px; background-color: blue; } </style> <body> <h1>二个示例:子元素水平垂直居中</h1> <div class="father"> <div class="son"></div> </div> </body>
商品列表--3行3列
<style> * { margin: 0;padding: 0; } .wrap { width: 750px; height: 1000px; margin: 0 auto; border: 1px solid red; } .nav { display: flex; flex-wrap: wrap; /* 换行 */ } .item { width: 33.33333%; height: 200px; border: 1px solid blue; box-sizing: border-box; background-color: white; } </style> <body> <h1>商品列表--3行3列</h1> <div class="wrap"> <div class="nav"> <div class="item">手机</div> <div class="item">电脑</div> <div class="item">洗衣机</div> <div class="item">理财产品</div> <div class="item">亏钱宝</div> <div class="item">体彩</div> <div class="item">亏多宝</div> <div class="item">天天亏宝</div> <div class="item">彩票</div> </div> </div> </body>