搜索
博主信息
博文 63
粉丝 8
评论 8
访问量 63708
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Flex通用布局-含头部及底部三列主体(中间自适应)
周Sir-BLOG
原创
1243人浏览过

Flex通用布局-含头部及底部三列主体(中间自适应)

布局要求

  • 使用Flex布局,包含头部及底部,主体三列布局,中间自适应;
  • 头部/底部要求100%宽度;
  • 主体宽度不超过1200px。

效果图如下

DOM结构如下:

  1. <div class="header">header</div>
  2. <div class="container">
  3. <div class="left">left</div>
  4. <div class="main">main</div>
  5. <div class="right">right</div>
  6. </div>
  7. <div class="footer">footer</div>

CSS(Flex布局):

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. .header,
  7. .footer {
  8. height: 40px;
  9. background: #f1f0f0;
  10. }
  11. .container {
  12. display: flex;
  13. max-width: 1200px; /*主体宽度不超过1200px,又要自适应缩小,宽度应该用max-width*/
  14. margin: 10px auto;
  15. min-height: 600px;
  16. }
  17. .container .left,
  18. .right {
  19. width: 200px;
  20. background: #f1f0f0;
  21. }
  22. .container .main {
  23. width: 100%;
  24. margin: 0 10px;
  25. background: #f1f0f0;
  26. }
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学