资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用 flex 实现 5 种常用布局

使用 flex 实现 5 种常用布局

thursday / 1725人阅读

摘要：原文链接经典的上中下布局。左边是定宽，右边是上中下布局。还是上中下布局，区别是固定在顶部，不会随着页面滚动。左侧固定在左侧且与视窗同高，当内容超出视窗高度时，在内部出现滚动条。左右两侧滚动条互相独立。

原文链接

Sticky Footer

经典的上-中-下布局。

当页面内容高度小于可视区域高度时，footer 吸附在底部；当页面内容高度大于可视区域高度时，footer 被撑开排在 content 下方

demo link

</>复制代码 
  2.   
    HEADER
  3.   
    CONTENT
  4.   
    FOOTER
</>复制代码 
  1. body {
  2.   min-height: 100vh;
  3.   display: flex;
  4.   flex-direction: column;
  5. }
  6. article {
  7.   flex: auto;
  8. }
Fixed-Width Sidebar

在上-中-下布局的基础上，加了左侧定宽 sidebar。

demo link

</>复制代码 
  2.   
    HEADER
  3.   
  4.     
  5.     
    CONTENT
  6.   
  7.   
    FOOTER
</>复制代码 
  1. body {
  2.   min-height: 100vh;
  3.   display: flex;
  4.   flex-direction: column;
  5. }
  6. .content {
  7.   flex: auto;
  8.   display: flex;
  9. }
  10. .content article {
  11.   flex: auto;
  12. }
Sidebar

左边是定宽 sidebar，右边是上-中-下布局。

demo link

</>复制代码 
  2.   
  3.   
  4.     
    HEADER
  5.     
    CONTENT
  6.     
    FOOTER
  7.   
</>复制代码 
  1. body {
  2.   min-height: 100vh;
  3.   display: flex;
  4. }
  5. aside {
  6.   flex: none;
  7. }
  8. .content {
  9.   flex: auto;
  10.   display: flex;
  11.   flex-direction: column;
  12. }
  13. .content article {
  14.   flex: auto;
  15. }
Sticky Header

还是上-中-下布局，区别是 header 固定在顶部，不会随着页面滚动。

demo link

</>复制代码 
  2.   
    HEADER
  3.   
    CONTENT
  4.   
    FOOTER
</>复制代码 
  1. body {
  2.   min-height: 100vh;
  3.   display: flex;
  4.   flex-direction: column;
  5.   padding-top: 60px;
  6. }
  7. header {
  8.   height: 60px;
  9.   position: fixed;
  10.   top: 0;
  11.   left: 0;
  12.   right: 0;
  13.   padding: 0;
  14. }
  15. article {
  16.   flex: auto;
  17.   height: 1000px;
  18. }
Sticky Sidebar

左侧 sidebar 固定在左侧且与视窗同高，当内容超出视窗高度时，在 sidebar 内部出现滚动条。左右两侧滚动条互相独立。

demo link

</>复制代码 
  2.   
  3.     ASIDE
  4.     
    item
  5.     
    item
  6.     
  7.     
    item
  8.   
  9.   
  10.     
    HEADER
  11.     
    CONTENT
  12.     
    FOOTER
  13.   
</>复制代码 
  1. body {
  2.   height: 100vh;
  3.   display: flex;
  4. }
  5. aside {
  6.   flex: none;
  7.   width: 200px;
  8.   overflow-y: auto;
  9.   display: block;
  10. }
  11. .content {
  12.   flex: auto;
  13.   display: flex;
  14.   flex-direction: column;
  15.   overflow-y: auto;
  16. }
  17. .content article {
  18.   flex: auto;
  19. }
云服务器 GPU云服务器 flex布局 android常用布局 16种常用的数据分析方法汇总 三种实现方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112821.html

相关文章

  • CSS 常用布局在小程序中的应用

    摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    garfileo 评论0 收藏0

  • CSS 常用布局在小程序中的应用

    摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    CoderDock 评论0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

    xiaolinbang 评论0 收藏0

  • 前端基本功-响应式布局(flex)

    摘要：属性定义了多根轴线的对齐方式。负值对该属性无效。属性允许单个项目有与其他项目不一样的对齐方式，可覆盖属性。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。 本文主要记录一些自己遇见的flex布局案例 简单回顾一下flex常用属性 6个常用的容器属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 f...

    xuexiangjys 评论0 收藏0

发表评论

登陆后可评论

0条评论

thursday

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<