还是要对flex布局比较熟悉的才能做出来，如果不熟悉的话，建议还是用传统的
float display: inline-block; 这种方式来做，
第一种:多用flex中的相关属性布局
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>zan-admin</title><script src="static/js/checkie&edge.js"></script><link href="static/css/bootstrap.css" rel="stylesheet"><link href="static/css/zan-admin.css" rel="stylesheet"><style>header {top: 0;left: 0;right: 0;height: 52px;/* 固定布局 */position: fixed;display: flex;}.left {height: inherit;/* 左侧菜单的宽度 *//* 这个属性也是指定宽度的 *//* flex-basis: 240px; */width: 240px;background-color: #e7e7e7;}.right {height: inherit;/* 占满剩下所有的宽度 *//* 注意：这里设置100%宽度是没有用的，则.left设置的宽度将会失效，因为100%是表示整个主轴的不是扣掉240px剩下的 *//* 小结:flex中要控制宽度啥的还是要注意，里面还是有些学问的; *//* width: 100%; *//* width: 50px; */flex-grow:1;background-color: #cccc;}main {padding-top: 52px;}@media screen and (max-width: 1200px) {header {display: flex;/* 注意：这个换行属性，是占满主轴宽度的时候才会换行，会换行的原因是下面设置了flex-basis: 100%; */flex-wrap: wrap;}.left {width: 100%;}/* 缩小时变成距离顶部104px */main {padding-top: 104px;}}</style本文发布于:2024-01-27 22:17:08，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063650282961.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
