弹性布局兼容例子

来源：互联网发布：手机淘宝取消私人定制编辑：程序博客网时间：2024/05/01 02:39
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;}body {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-moz-box-orient: vertical;-moz-box-direction: normal;flex-direction: column;-webkit-flex-direction: column;}.hade {width: 100%;height: 70px;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-moz-box-orient: horizontal;-moz-box-direction: normal;flex-direction: row;-webkit-flex-direction: row;}.sz {width: 200px;background: salmon;}.sy {box-flex: 1;-webkit-box-flex: 1;-moz-box-flex: 1;flex: 1;-webkit-flex: 1;background: seagreen;min-width:300px;}.content {width: 100%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-moz-box-orient: horizontal;-moz-box-direction: normal;flex-direction: row;-webkit-flex-direction: row;box-flex: 1;-webkit-box-flex: 1;-moz-box-flex: 1;flex: 1;-webkit-flex: 1;}.syc {width: 100px;height: 100px;text-align: center;line-height: 100px;margin: 50px auto;background: gary;}.z1 {width: 50%;background: red;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-moz-box-orient: horizontal;-moz-box-direction: normal;flex-direction: row;-webkit-flex-direction: row;}.z2 {box-flex: 4;-webkit-box-flex: 4;-moz-box-flex: 4;flex: 4;-webkit-flex: 4;background: salmon;}.z3 {box-flex: 2;-webkit-box-flex: 2;-moz-box-flex: 2;flex: 2;-webkit-flex: 2;background: magenta;}.z1a {float: left;width: 300px;}</style></head><body><div class="hade"><div class="sz">上左宽高固定</div><div>上中宽高不给</div><div class="sy"><div class="syc">测试</div></div></div><div class="content"><div class="z1"><div class="z1a">haha1</div><div class="z1a">haha2</div><div class="z1a">haha3</div></div><div class="z2">中部宽高自适应</div><div class="z3">中部宽高自适应</div></div><div class="footer">底</div></body></html>
1 0