• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

flex弹性布局和grid格子布局常用5种布局结构

191 0

flex弹性布局

flex第一种基本布局

header会占据除去footer的所有高度,footer高度可以自己设置,默认是占满的。

<div id="layout">
    <div class="one">header</div>
    <div class="two">footer</div>
</div>
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.one {
  background-color: #4cb4e7;
  flex-grow: 1;
}
.two {
  background-color: #ffc09f;
}

flex第二种三明治布局

这种一般用于非悬浮header,三明治结构,现在大部分都是这种了吧!main会占据除去header和footer的高度。

<div id="layout">
    <div class="one">header</div>
    <div class="two">main</div>
    <div class="three">footer</div>
</div>
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.one {
  background-color: #4cb4e7;
}
.two {
  background-color: #ffc09f;
  flex-grow: 1;
}
.three {
  background-color: #ffee93;
}

flex第三种两栏布局

两栏结构,也是常见布局了

<div id="layout">
    <div class="one">header</div>
    <div class="two">main</div>
</div>
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  height: 100%;
  color: #fff;
  display: flex;
}

.one {
  background-color: #4cb4e7;
  width: 30%;
}
.two {
  background-color: #ffc09f;
  flex-grow: 1;
}
.three {
  background-color: #ffee93;
}

flex第四种三明治+两栏

从这里开始,flex和grid的html元素就会出现不同了。flex默认他单向性的,它会将所有子元素在主轴上排列。flex-direction则可以改变主轴的方向。

<div id="layout">
    <div class="one">header</div>
    <div class="content">
        <div class="two">aside</div>
        <div class="three">main</div>
    </div>
    <div class="four">footer</div>
</div>
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#layout {
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.one {
    background-color: #4cb4e7;
}

.content {
    flex-grow: 1;
    display: flex;
}

.two {
    background-color: #ffc09f;
    width: 30%;
}

.three {
    background-color: #ffee93;
    width: 70%;
}

.four {
    background-color: #e2dbbe;
}

flex第五种三明治+三栏结构

这种结构也常用于博客吧,我以前写的主题就用的这种结构,但是 不是flex,是自己瞎鸡儿凑的。233...

aside和sidebar宽度可以自己定,main则会占据剩余的宽度

<div id="layout">
    <div class="one">header</div>
    <div class="content">
        <div class="two">aside</div>
        <div class="three">main</div>
        <div class="four">sidebar</div>
    </div>
    <div class="five">footer</div>
</div>
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#layout {
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.one {
    background-color: #4cb4e7;
}

.content {
    flex-grow: 1;
    display: flex;
}

.two {
    background-color: #ffc09f;
}

.three {
    background-color: #ffee93;
    flex-grow: 1;
}

.four {
    background-color: #e2dbbe;
}

.five {
    background-color: #a3a380;
}

grid 布局

grid第一种基本布局

header会占据除去footer的所有高度,footer高度可以自己设置,默认是占满的。

<div id="layout">
    <div class="one">header</div>
    <div class="two">footer</div>
</div>
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  height: 100%;
  color: #fff;
  display: grid;
  grid-template-rows: auto fit-content(1rem);
}

.one {
  background-color: #4cb4e7;
}
.two {
  background-color: #ffc09f;
}

grid第二种三明治布局

这种一般用于非悬浮header,三明治结构,现在大部分都是这种了吧!main会占据除去header和footer的高度。

<div id="layout">
    <div class="one">header</div>
    <div class="two">footer</div>
</div>
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  height: 100%;
  color: #fff;
  display: grid;
  grid-template-rows: fit-content(1rem) auto fit-content(1rem);
}

.one {
  background-color: #4cb4e7;
}
.two {
  background-color: #ffc09f;
}
.three {
  background-color: #ffee93;
}

grid第三种两栏布局

两栏结构,也是常见布局了

<div id="layout">
    <div class="one">header</div>
    <div class="two">footer</div>
</div>
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  height: 100%;
  color: #fff;
  display: grid;
  grid-template-columns: 30% auto;
}

.one {
  background-color: #4cb4e7;
}
.two {
  background-color: #ffc09f;
}
.three {
  background-color: #ffee93;
}

grid第四种三明治+两栏

grid有好几种方式可以达到这个效果,比如命名线号,命名格子,都可以的,这里用最基础的,最基本的方式完成。

<div id="layout">
    <div class="one">header</div>
    <div class="two">aside</div>
    <div class="three">main</div>
    <div class="four">footer</div>
</div>
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#layout {
    height: 100%;
    color: #fff;
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: fit-content(1rem) 1fr fit-content(1rem);
}

.one {
    background-color: #4cb4e7;
    grid-column: 1 / 3;
}

.two {
    background-color: #ffc09f;
}

.three {
    background-color: #ffee93;
}

.four {
    background-color: #e2dbbe;
    grid-column: 1 / 3;
}

grid第五种三明治+三栏结构

<div id="layout">
    <div class="one">header</div>
    <div class="two">aside</div>
    <div class="three">main</div>
    <div class="four">sidebar</div>
    <div class="five">footer</div>
</div>
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#layout {
    height: 100%;
    color: #fff;
    display: grid;
    grid-template-columns: fit-content(1rem) 1fr fit-content(1rem);
    grid-template-rows: fit-content(1rem) 1fr fit-content(1rem);
}

.one {
    background-color: #4cb4e7;
    grid-column: 1 / 4;
}

.two {
    background-color: #ffc09f;
}

.three {
    background-color: #ffee93;
}

.four {
    background-color: #e2dbbe;
}

.five {
    background-color: #a3a380;
    grid-column: 1 / 4;
}
0
微信收款码
微信收款码