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

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

木灵鱼儿

374 天前HTML CSS

787 0 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;
}