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

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