前言：网页元素布局从最初的table画表格阶段（史前到2000前后），到div+float（2000到2017），再到现在的flex box, grid（2017后）的布局方式，已经过去了20年了。flex尤其是grid布局出现后，基本上取代了float的功能，再不用左右float了。至于兼容性，最新的的浏览器全部支持flex box与grid的布局。今天开始，以几个例子展示一下flex box的布局。如果需要了解flex box的语法，请离开本教程。
内容：https://www.bilibili.com/video/BV1nJ411h75P?from=search&seid=17783340421417318089， 是根据这个小例子进行的，已经进行了测试。
第一步：拉伸的输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
padding-right:10px;
}
.form-row input{
flex:1;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-row">
<label for="pwd">Password</label>
<input type="password" id="pwd">
</div>
</form>
</div>
</body>
</html>
第二步：无它，order
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
padding-right:10px;
}
.form-row input{
flex:1;
}
.column-layout{
max-width: 1300px;
background-color: #fff;
margin:40px auto 0 auto;
line-height: 1.65;
padding: 20px 50px;
display:flex;
}
.main-column{
flex:2;
order:2
}
.sidebar-one{
flex:1;
}
.sidebar-two{
flex:1;
order:3;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-row">
<label for="pwd">Password</label>
<input type="password" id="pwd">
</div>
</form>
</div>
<div class="column-layout">
<div class="main-column">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, repellat, at! Iste consequatur odit placeat esse, illo reprehenderit explicabo? Eveniet iusto sit voluptate sapiente, distinctio praesentium consequatur facilis ad magnam!</p>
</div>
<div class="sidebar-one">
<h3>Sidebar One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
<div class="sidebar-two">
<h3>Sidebar Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
</div>
</body>
</html>
第三步：flex-basis, 加一步响应式案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
padding-right:10px;
}
.form-row input{
flex:1;
}
.column-layout{
max-width: 1300px;
background-color: #fff;
margin:40px auto 0 auto;
line-height: 1.65;
padding: 20px 50px;
display:flex;
}
.main-column{
flex:2;
order:2
}
.sidebar-one{
flex:1;
}
.sidebar-two{
flex:1;
order:3;
}
.call-outs-container{
max-width: 1400px;
margin:40px auto 0 auto;
// display:flex;
// justify-content: space-between;
}
.call-out{
padding:20px;
box-sizing: border-box;
margin-bottom: 20px;
flex-basis: 30%;
}
.call-out:nth-child(1){
background-color: aqua;
}
.call-out:nth-child(2){
background-color:beige;
}
.call-out:nth-child(3){
background-color:green;
}
@media (min-width:900px){
.call-outs-container{
display:flex;
justify-content: space-between;
}
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-row">
<label for="pwd">Password</label>
<input type="password" id="pwd">
</div>
</form>
</div>
<div class="column-layout">
<div class="main-column">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, repellat, at! Iste consequatur odit placeat esse, illo reprehenderit explicabo? Eveniet iusto sit voluptate sapiente, distinctio praesentium consequatur facilis ad magnam!</p>
</div>
<div class="sidebar-one">
<h3>Sidebar One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
<div class="sidebar-two">
<h3>Sidebar Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
</div>
<div class="call-outs-container">
<div class="call-out">
<h4>
Feature 1
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum
</p>
</div>
<div class="call-out">
<h4>
Feature 2
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
<div class="call-out">
<h4>
Feature 3
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
</div>
</body>
</html>
第四步:固定在一行里，不换行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
padding-right:10px;
}
.form-row input{
flex:1;
}
.column-layout{
max-width: 1300px;
background-color: #fff;
margin:40px auto 0 auto;
line-height: 1.65;
padding: 20px 50px;
display:flex;
}
.main-column{
flex:2;
order:2
}
.sidebar-one{
flex:1;
}
.sidebar-two{
flex:1;
order:3;
}
.call-outs-container{
max-width: 1400px;
margin:40px auto 0 auto;
// display:flex;
// justify-content: space-between;
}
.call-out{
padding:20px;
box-sizing: border-box;
margin-bottom: 20px;
flex-basis: 30%;
}
.call-out:nth-child(1){
background-color: aqua;
}
.call-out:nth-child(2){
background-color:beige;
}
.call-out:nth-child(3){
background-color:green;
}
@media (min-width:900px){
.call-outs-container{
display:flex;
justify-content: space-between;
}
}
.fixed-size-container{
max-width: 1400px;
margin:40px auto 0 auto;
background-color: #fff;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.fixed-size{
width: 150px;
height:100px;
background-color: #990b47;
color: #fff;
line-height: 100px;
text-align-last: center;
font-weight: bold;
font-size: 60px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-row">
<label for="pwd">Password</label>
<input type="password" id="pwd">
</div>
</form>
</div>
<div class="column-layout">
<div class="main-column">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, repellat, at! Iste consequatur odit placeat esse, illo reprehenderit explicabo? Eveniet iusto sit voluptate sapiente, distinctio praesentium consequatur facilis ad magnam!</p>
</div>
<div class="sidebar-one">
<h3>Sidebar One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
<div class="sidebar-two">
<h3>Sidebar Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
</div>
<div class="call-outs-container">
<div class="call-out">
<h4>
Feature 1
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum
</p>
</div>
<div class="call-out">
<h4>
Feature 2
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
<div class="call-out">
<h4>
Feature 3
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
</div>
<div class="fixed-size-container">
<div class="fixed-size">1</div>
<div class="fixed-size">2</div>
<div class="fixed-size">3</div>
<div class="fixed-size">4</div>
<div class="fixed-size">5</div>
</div>
</body>
</html>
第五步：借助display:flex 和 margin: auto实现居中
margin:0 auto //左右居中
margin:auto//左右上下居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
padding-right:10px;
}
.form-row input{
flex:1;
}
.column-layout{
max-width: 1300px;
background-color: #fff;
margin:40px auto 0 auto;
line-height: 1.65;
padding: 20px 50px;
display:flex;
}
.main-column{
flex:2;
order:2
}
.sidebar-one{
flex:1;
}
.sidebar-two{
flex:1;
order:3;
}
.call-outs-container{
max-width: 1400px;
margin:40px auto 0 auto;
// display:flex;
// justify-content: space-between;
}
.call-out{
padding:20px;
box-sizing: border-box;
margin-bottom: 20px;
flex-basis: 30%;
}
.call-out:nth-child(1){
background-color: aqua;
}
.call-out:nth-child(2){
background-color:beige;
}
.call-out:nth-child(3){
background-color:green;
}
@media (min-width:900px){
.call-outs-container{
display:flex;
justify-content: space-between;
}
}
.fixed-size-container{
max-width: 1400px;
margin:40px auto 0 auto;
background-color: #fff;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.fixed-size{
width: 150px;
height:100px;
background-color: #990b47;
color: #fff;
line-height: 100px;
text-align-last: center;
font-weight: bold;
font-size: 60px;
margin-bottom: 20px;
}
.banner{
height:400px;
max-width: 700px;
margin:40px auto 40px auto;
background-color: #2a2a2a;
display: flex;
}
.center-me{
color: #fff;
font-size: 50px;
//margin: 0 auto;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-row">
<label for="pwd">Password</label>
<input type="password" id="pwd">
</div>
</form>
</div>
<div class="column-layout">
<div class="main-column">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, repellat, at! Iste consequatur odit placeat esse, illo reprehenderit explicabo? Eveniet iusto sit voluptate sapiente, distinctio praesentium consequatur facilis ad magnam!</p>
</div>
<div class="sidebar-one">
<h3>Sidebar One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
<div class="sidebar-two">
<h3>Sidebar Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
</div>
<div class="call-outs-container">
<div class="call-out">
<h4>
Feature 1
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum
</p>
</div>
<div class="call-out">
<h4>
Feature 2
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
<div class="call-out">
<h4>
Feature 3
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
</div>
<div class="fixed-size-container">
<div class="fixed-size">1</div>
<div class="fixed-size">2</div>
<div class="fixed-size">3</div>
<div class="fixed-size">4</div>
<div class="fixed-size">5</div>
</div>
<div class="banner">
<div class="center-me">
Center Me plz
</div>
</div>
</body>
</html>
第六步：一个左右结构的演示
这部分最重要的功能在于通过一个左右分割的布局来演示flex的嵌套。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
padding-right:10px;
}
.form-row input{
flex:1;
}
.column-layout{
max-width: 1300px;
background-color: #fff;
margin:40px auto 0 auto;
line-height: 1.65;
padding: 20px 50px;
display:flex;
}
.main-column{
flex:2;
order:2
}
.sidebar-one{
flex:1;
}
.sidebar-two{
flex:1;
order:3;
}
.call-outs-container{
max-width: 1400px;
margin:40px auto 0 auto;
// display:flex;
// justify-content: space-between;
}
.call-out{
padding:20px;
box-sizing: border-box;
margin-bottom: 20px;
flex-basis: 30%;
}
.call-out:nth-child(1){
background-color: aqua;
}
.call-out:nth-child(2){
background-color:beige;
}
.call-out:nth-child(3){
background-color:green;
}
@media (min-width:900px){
.call-outs-container{
display:flex;
justify-content: space-between;
}
}
.fixed-size-container{
max-width: 1400px;
margin:40px auto 0 auto;
background-color: #fff;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.fixed-size{
width: 150px;
height:100px;
background-color: #990b47;
color: #fff;
line-height: 100px;
text-align-last: center;
font-weight: bold;
font-size: 60px;
margin-bottom: 20px;
}
.banner{
height:400px;
max-width: 700px;
margin:40px auto 40px auto;
background-color: #2a2a2a;
display: flex;
}
.center-me{
color: #fff;
font-size: 50px;
//margin: 0 auto;
margin: auto;
}
.equal-height-container{
max-width: 900px;
margin:0 auto;
display: flex;
}
.first{
background-color: darkorange;
padding: 20px;
flex:1;
}
.second{
background-color: yellow;
flex:1;
display: flex;
flex-direction: column;
}
.second-a{
background-color: #c0dbe2;
flex:1;
}
.second-b{
background-color: purple;
flex:2;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-row">
<label for="pwd">Password</label>
<input type="password" id="pwd">
</div>
</form>
</div>
<div class="column-layout">
<div class="main-column">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, repellat, at! Iste consequatur odit placeat esse, illo reprehenderit explicabo? Eveniet iusto sit voluptate sapiente, distinctio praesentium consequatur facilis ad magnam!</p>
</div>
<div class="sidebar-one">
<h3>Sidebar One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
<div class="sidebar-two">
<h3>Sidebar Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
</div>
<div class="call-outs-container">
<div class="call-out">
<h4>
Feature 1
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum
</p>
</div>
<div class="call-out">
<h4>
Feature 2
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
<div class="call-out">
<h4>
Feature 3
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
</div>
<div class="fixed-size-container">
<div class="fixed-size">1</div>
<div class="fixed-size">2</div>
<div class="fixed-size">3</div>
<div class="fixed-size">4</div>
<div class="fixed-size">5</div>
</div>
<div class="banner">
<div class="center-me">
Center Me plz
</div>
</div>
<div class="equal-height-container">
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sit temporibus explicabo voluptatem aspernatur provident vero excepturi voluptatum, deserunt distinctio facere animi officia. Amet aliquam, accusamus dolores pariatur asperiores error!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quaerat est ducimus aliquam ullam rerum, cum facilis ratione alias ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, laudantium.</p>
</div>
<div class="second">
<div class="second-a">A</div>
<div class="second-b">B</div>
</div>
</div>
</body>
</html>
后记：上面的例子基本上演示了基本的flexbox布局的功能，其中第一个输入框显得跟怪异，略微对其一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.form-row{
padding:10px 0;
display:flex;
}
.form-row label{
flex-basis: 10%;
text-align:right;
padding-right: 10px;
}
.form-row input{
flex:1;
}
.column-layout{
max-width: 1300px;
background-color: #fff;
margin:40px auto 0 auto;
line-height: 1.65;
padding: 20px 50px;
display:flex;
}
.main-column{
flex:2;
order:2
}
.sidebar-one{
flex:1;
}
.sidebar-two{
flex:1;
order:3;
}
.call-outs-container{
max-width: 1400px;
margin:40px auto 0 auto;
// display:flex;
// justify-content: space-between;
}
.call-out{
padding:20px;
box-sizing: border-box;
margin-bottom: 20px;
flex-basis: 30%;
}
.call-out:nth-child(1){
background-color: aqua;
}
.call-out:nth-child(2){
background-color:beige;
}
.call-out:nth-child(3){
background-color:green;
}
@media (min-width:900px){
.call-outs-container{
display:flex;
justify-content: space-between;
}
}
.fixed-size-container{
max-width: 1400px;
margin:40px auto 0 auto;
background-color: #fff;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.fixed-size{
width: 150px;
height:100px;
background-color: #990b47;
color: #fff;
line-height: 100px;
text-align-last: center;
font-weight: bold;
font-size: 60px;
margin-bottom: 20px;
}
.banner{
height:400px;
max-width: 700px;
margin:40px auto 40px auto;
background-color: #2a2a2a;
display: flex;
}
.center-me{
color: #fff;
font-size: 50px;
//margin: 0 auto;
margin: auto;
}
.equal-height-container{
max-width: 900px;
margin:0 auto;
display: flex;
}
.first{
background-color: darkorange;
padding: 20px;
flex:1;
}
.second{
background-color: yellow;
flex:1;
display: flex;
flex-direction: column;
}
.second-a{
background-color: #c0dbe2;
flex:1;
}
.second-b{
background-color: purple;
flex:2;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-row">
<label for="pwd">Password</label>
<input type="password" id="pwd">
</div>
</form>
</div>
<div class="column-layout">
<div class="main-column">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsum sunt labore fugiat perferendis animi, corporis voluptates cum cumque commodi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, repellat, at! Iste consequatur odit placeat esse, illo reprehenderit explicabo? Eveniet iusto sit voluptate sapiente, distinctio praesentium consequatur facilis ad magnam!</p>
</div>
<div class="sidebar-one">
<h3>Sidebar One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
<div class="sidebar-two">
<h3>Sidebar Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, explicabo! Dolorum minus saepe aliquam voluptatem tempore ipsum blanditiis, nostrum fuga.</p>
</div>
</div>
<div class="call-outs-container">
<div class="call-out">
<h4>
Feature 1
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum
</p>
</div>
<div class="call-out">
<h4>
Feature 2
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
<div class="call-out">
<h4>
Feature 3
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ea architecto minus, magni tempore alias, placeat eum illum sunt culpa inventore reiciendis, quaerat cupiditate repellendus molestias commodi consequuntur voluptate ratione.
</p>
</div>
</div>
<div class="fixed-size-container">
<div class="fixed-size">1</div>
<div class="fixed-size">2</div>
<div class="fixed-size">3</div>
<div class="fixed-size">4</div>
<div class="fixed-size">5</div>
</div>
<div class="banner">
<div class="center-me">
Center Me plz
</div>
</div>
<div class="equal-height-container">
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sit temporibus explicabo voluptatem aspernatur provident vero excepturi voluptatum, deserunt distinctio facere animi officia. Amet aliquam, accusamus dolores pariatur asperiores error!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quaerat est ducimus aliquam ullam rerum, cum facilis ratione alias ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, laudantium.</p>
</div>
<div class="second">
<div class="second-a">A</div>
<div class="second-b">B</div>
</div>
</div>
</body>
</html>
齐活。