关闭

使用flex实现5种常用布局

时间: 2017-12-05阅读: 5231标签: 布局

Sticky Footer

经典的上-中-下布局。

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

demo link


<body>
  <header>HEADER</header>
  <article>CONTENT</article>
  <footer>FOOTER</footer>
</body>
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
article {
  flex: auto;
}


Fixed-Width Sidebar

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

demo link


<body>
  <header>HEADER</header>
  <div class="content">
    <aside>ASIDE</aside>
    <article>CONTENT</article>
  </div>
  <footer>FOOTER</footer>
</body>
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: auto;
  display: flex;
}
.content article {
  flex: auto;
}


Sidebar

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

demo link


<body>
  <aside>ASIDE</aside>
  <div class="content">
    <header>HEADER</header>
    <article>CONTENT</article>
    <footer>FOOTER</footer>
  </div>
</body>
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


<body>
  <header>HEADER</header>
  <article>CONTENT</article>
  <footer>FOOTER</footer>
</body>
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


<body>
  <aside>
    ASIDE
    <p>item</p>
    <p>item</p>
    <!-- many items -->
    <p>item</p>
  </aside>
  <div class="content">
    <header>HEADER</header>
    <article>CONTENT</article>
    <footer>FOOTER</footer>
  </div>
</body>
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://github.com/meikidd/flex-layout


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/218

响应式布局与自适应式布局有什么不同

很多人经常会对响应式布局和自适应式布局产生混淆,今天将为大家介绍这两者到底表示的是什么以及它们之间的区别。具有一定的参考作用,希望对大家有所帮助。

CSS三栏布局的5种方法详解

假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应.将浏览器窗口压窄,可以看到变化。由于上面的代码中设置的高度是min-width,而不是设置的固定高度width,所以现在看到的也就是高度不固定的情况。

flex 增长与收缩

flex:auto 将增长值与收缩值设置为1,基本大小为 auto 。flex:none. 将增长值与收缩值设置为0,基本大小为 auto 。也就是固定大小。增长:基本大小 + 额外空间 *(增长系数 / 增长系数总和) 按比例划分额外空间,然后各自分配。

底部粘连(stiky footer)布局

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送

CSS:BFC规则的应用自适应两栏布局

两栏布局是写页面时经常用到的,要想实现两栏布局,就需要明白BFC规则,Block formatting context,直译为“块级格式化上下文”,可以简单的理解它为一个独立的区域,把区域内部元素与外部元素区分开,两者互不干扰。

css页面常用布局技巧

居中布局;水平居中(宽度自适应);垂直居中(高度自适应);水平垂直居中;多列布局;左边定宽,右边自适应;左边不定宽,右边自适应;等宽布局;等高布局

移动端H5固定底部导航菜单的三种布局实现

需要把导航固定在底部?只能滑动内容,导航菜单固定不动的。这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及css3的flex布局。

flex的各种布局

Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。

页面中有间隔的方格布局如何完美实现?

方格中间有一定的间隙,间隙是固定的。应该如何布局会更加完美呢,比如要保证在布局完成的情况下,可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候,这样的布局依然能够不受影响

css 定位布局

文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列。块元素占一行,行内元素在一行之内从左到在排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!