关于flex实现左右结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0 } body,html{ height: 100% } ul{ list-style: none; display: -webkit-box; display: -webkit-flex; -webkit-flex-flow:row nowrap; justify-content:space-around; align-content:flex-start; align-items:flex-start; background: #ccc; height: 100% } li{ width:200px; height: 200px; background: tomato; } </style> </head> <body> <ul> <li style="order:2;flex-grow:0">2</li> <li style="order:3;flex-grow:1">3</li> </ul> </body> </html>
版权声明:本文为博主原创文章,未经博主允许不得转载。