使用 flex 实现 5 种常用布局

thursday 发布于2019-08-29 13:57 / 1584人阅读

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

原文链接

Sticky Footer

经典的上-中-下布局。

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

demo link


  HEADER
  CONTENT
  FOOTER

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
article {
  flex: auto;
}

Fixed-Width Sidebar

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

demo link


  HEADER
  
    ASIDE
    CONTENT
  
  FOOTER

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: auto;
  display: flex;
}
.content article {
  flex: auto;
}

Sidebar

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

demo link


  ASIDE
  
    HEADER
    CONTENT
    FOOTER

body {
  min-height: 100vh;
  display: flex;
}
aside {
  flex: none;
}
.content {
  flex: auto;
  display: flex;
  flex-direction: column;
}
.content article {
  flex: auto;
}

Sticky Header

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

demo link


  HEADER
  CONTENT
  FOOTER

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 60px;
}
header {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
}
article {
  flex: auto;
  height: 1000px;
}

Sticky Sidebar

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

demo link


  
    ASIDE
    item
    item
    
    item
  
  
    HEADER
    CONTENT
    FOOTER

body {
  height: 100vh;
  display: flex;
}
aside {
  flex: none;
  width: 200px;
  overflow-y: auto;
  display: block;
}
.content {
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.content article {
  flex: auto;
}

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

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

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

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

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

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

CoderDock 2019-08-30 15:44 评论0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 评论0 收藏0
前端基本功-响应式布局(flex)

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

xuexiangjys 2019-08-30 15:55 评论0 收藏0