自适应的经典布局少任意一个模块都能自适应

来源：互联网发布：网络音响系统布线图编辑：程序博客网时间：2024/05/22 03:53

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>flex 布局</title><link rel="stylesheet" href="index.css"><style>.freeLayout-bd{display: flex;width: 100%;height:100vh;}/*.left{ flex:1; }.right{ flex:1; }*/.freeLayout-left{ width: 200px; }.freeLayout-right{ width: 250px; }.freeLayout-center{ flex:2; }.freeLayout-left{ background: #C7E0FE;}.freeLayout-center{ background: #ccc; height:100%;}.freeLayout-top,.freeLayout-bottom{    flex: 1;    flex-direction:column;    height: 100%;    padding:10px;    box-sizing: border-box;}.freeLayout-top{ background: #F0E68C;}.freeLayout-bottom{ background: #FFC0CB; }.freeLayout-center>div:nth-last-child(2){ height: 10% }.freeLayout-center>.freeLayout-top+.freeLayout-bottom{ height: 90%;}.freeLayout-right{background: #30C37C;}</style></head><body><div class="freeLayout-bd"><div class="freeLayout-left"></div><div class="freeLayout-center"><div class="freeLayout-top"> </div><div class="freeLayout-bottom"> </div></div><div class="freeLayout-right"></div></div></body></html>

阅读全文

0 0

自适应的经典布局 少任意一个模块都能自适应

自适应的经典布局少任意一个模块都能自适应