html div flex,CSS Flex实现各种布局

实现两栏布局

* {

margin: 0px;

padding: 0px;

}

html,

body {

height: 100%;

}

.main {

height: 100%;

display: flex;

flex-direction: row;

}

.left {

flex-basis: 200px;

background-color: blue;

height: 100%;

}

.contain {

background-color: red;

height: 100%;

flex-basis: calc(100% - 200px);

}

WX20180810-112720@2x.png

实现栅格布局

* {

margin: 0px;

padding: 0px;

}

html,

body {

height: 100%;

}

.main {

height: 100%;

display: flex;

flex-direction: row;

}

.left {

flex: 1;

background-color: blue;

height: 100%;

}

.middle {

flex: 3;

background-color: red;

height: 100%;

}

.right {

flex: 1;

background-color: yellow;

height: 100%;

}

WX20180810-112918@2x.png

实现三栏布局

* {

margin: 0px;

padding: 0px;

}

html,

body {

height: 100%;

}

.main {

height: 100%;

display: flex;

flex-direction: column;

}

.header {

flex-basis: 100px;

background-color: blue;

}

.content {

flex-basis: calc(100% - 200px);

display: flex;

flex-direction: row;

}

.left {

flex-basis: 200px;

background-color: red;

}

.right {

flex-basis: calc(100% - 200px);

background-color: green;

}

.footer {

flex-basis: 100px;

background-color: yellow;

}

WX20180810-113109@2x.png

附录

双飞翼布局

.content {

padding: 0 230px 0 190px;

}

.main,

.left,

.right {

float: left;

min-height: 300px;

text-align: center;

}

.main {

width: 100%;

background: red;

}

.left {

width: 190px;

margin-left: -100%;

background: green;

}

.right {

width: 230px;

margin-left: -230px;

background: yellow;

}

main

left

right

圣杯布局

圣杯布局

.container {

padding: 0 230px 0 190px;

}

.main,

.left,

.right {

float: left;

min-height: 300px;

position: relative;

}

.main {

width: 100%;

background: red;

}

.left {

width: 190px;

margin-left: -100%;

left: -190px;

background: green;

}

.right {

width: 230px;

margin-left: -230px;

right: -230px;

background: yellow;

}