知方号

知方号

css

css

弹性布局display: flex;垂直方向布局的具体实践。

在父级设置:

display: flex;将对象作为弹性伸缩盒显示flex-flow: column;方向设置为垂直方向(flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,直接使用flex-direction亦可)父级需设置高度

在子级设置占比:

flex: 1;按占比分配非设置固定值的空间* {margin: 0;padding: 0;}html, body {height: 100%;}.wrap {height: 100%;flex-flow: column;display:flex;}.header {height: 30px;line-height: 30px;background: pink;}.wrapper {flex: 1;display:flex;border: 1px solid blue;}.left, .middle, .right {flex: 1;display:flex;flex-flow: column;padding: 5px 0;}.cl {border: 1px solid pink;flex: 1;margin: 5px;}头部标题123456789

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。

上一篇 没有了

下一篇没有了