console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex布局</title>
</head>
<body>
<section class="f1-container">
<label class="title">例1：容器属性(flex-direction:row)</label>
<div class="container row">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
<div class="container column">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
</section>
<hr>
<section class="f2-container">
<label class="title">例2：容器属性(justify-content)</label>
<div class="container flex-start">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
<div class="container flex-end">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
<div class="container center">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
<div class="container space-between">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
<div class="container space-around">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
</section>
<hr>
<section class="f3-container">
<label class="title">例3：容器属性(align-items)</label>
<div class="container align-flex-start">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
<div class="container align-flex-end">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
<div class="container align-center">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
<div class="container align-baseline">
<span class="box red">sdafssdfasfdsfsfdsfasdfsdfsdafdsf</span>
<div class="box green">2</div>
<label class="box blue">sdafssdfasfdsfsfdsfasdfsdfsdafdsfsdafssdfasfdsfsfdsfasdfsdfsdafdsfsdafssdfasfdsfsfdsfasdfsdfsdafdsf</label>
</div>
<div class="container align-stretch">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
</div>
</section>
<hr>
<section class="f4-container">
<label class="title">例4：容器属性(align-content)</label>
<div class="container align-content-flex-start">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
<div class="container align-content-flex-end">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
<div class="container align-content-center">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
<div class="container align-content-space-between">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
<div class="container align-content-space-around">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
<div class="container align-content-stretch">
<span class="box red">1</span>
<div class="box green">2</div>
<label class="box blue">3</label>
<span class="box pink">4</span>
<span class="box yellow">5</span>
</div>
</section>
<hr>
<section class="f5-container">
<label class="title">例5：项目属性(order)</label>
<div class="container">
<span class="box red box2">1</span>
<div class="box green box2">2</div>
<label class="box blue box1">3</label>
<span class="box pink box1">4</span>
<span class="box yellow box3">5</span>
</div>
</section>
<hr>
<section class="f6-container">
<label class="title">例6：项目属性(flex-grow)</label>
<div class="container">
<span class="box red box1">1</span>
<div class="box green box2">2</div>
<label class="box blue box3">3</label>
</div>
</section>
<hr>
<section class="f7-container">
<label class="title">例7：项目属性(flex-shrink)</label>
<div class="container">
<span class="box red box1">1</span>
<div class="box green box2">2</div>
<label class="box blue box3">3</label>
<span class="box pink box4">4</span>
<span class="box yellow box5">5</span>
</div>
</section>
<hr>
<section class="f8-container">
<label class="title">例8：项目属性(flex-basis)</label>
<div class="container">
<span class="box red box1">flex-basis:200px</span>
<div class="box green box2">2</div>
<label class="box blue box3">3</label>
</div>
</section>
<hr>
<section class="f9-container">
<label class="title">例9：项目属性(flex)</label>
<div class="container">
<span class="box red box1">0 1 auto</span>
<div class="box green box2">auto</div>
<label class="box blue box3">0 1 auto</label>
</div>
</section>
<hr>
<section class="f10-container">
<label class="title">例10：项目属性(align-self)</label>
<div class="container">
<span class="box red align-self-auto">auto</span>
<div class="box green align-self-flex-start">flex-start</div>
<label class="box blue align-self-flex-end">flex-end</label>
<span class="box pink align-self-center">center</span>
<span class="box yellow align-self-baseline">baseline</span>
<span class="box black align-self-stretch">stretch</span>
</div>
</section>
<hr>
</body>
</html>
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
.pink {
background: pink;
}
.yellow {
background: yellow;
}
.black {
background: black;
color:#fff;
}
.box {
width: 100px;
height: 100px;
}
.flex-start {
justify-content: flex-start;
}
.flex-start::before {
content: 'flex-start:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.flex-end {
justify-content: flex-end;
}
.flex-end::before {
content: 'flex-end:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.center {
justify-content: center;
}
.center::before {
content: 'center:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.space-around {
justify-content: space-around;
}
.space-around::before {
content: 'space-around:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.space-between {
justify-content: space-between;
}
.space-between::before {
content: 'space-between:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-flex-start {
align-items: flex-start;
}
.align-flex-start::before {
content: 'flex-start:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-flex-end {
align-items: flex-end;
}
.align-flex-end::before {
content: 'flex-end:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-center {
align-items: center;
}
.align-center::before {
content: 'center:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-baseline {
align-items: baseline;
}
.align-baseline::before {
content: 'baseline:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-stretch {
align-items: stretch;
}
.align-stretch::before {
content: 'stretch:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.row {
flex-direction: row;
}
.row::before {
content: 'row:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.column {
flex-direction: column;
}
.column::before {
content: 'column:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-content-flex-start {
align-content: flex-start;
}
.align-content-flex-start::before {
content: 'flex-start:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-content-flex-end {
align-content: flex-end;
}
.align-content-flex-end::before {
content: 'flex-end:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-content-center {
align-content: center;
}
.align-content-center::before {
content: 'center:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-content-space-between {
align-content: space-between;
}
.align-content-space-between::before {
content: 'space-between:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-content-space-around {
align-content: space-around;
}
.align-content-space-around::before {
content: 'space-around:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-content-stretch {
align-content: stretch;
}
.align-content-stretch::before {
content: 'stretch:';
display: 'inline';
color: red;
position: absolute;
left: 10px;
}
.align-self-auto {
align-self: auto;
}
.align-self-flex-start {
align-self: flex-start;
}
.align-self-flex-end {
align-self: flex-end;
}
.align-self-center {
align-self: center;
}
.align-self-baseline {
align-self: baseline;
}
.align-self-stretch {
align-self: stretch;
}
.container {
display: flex;
width: 500px;
height: 200px;
margin: 10px auto;
border: 1px solid red;
padding: 10px;
}
.f1-container .box {
width:100px;
height: 50px;
flex-shrink: 0;
}
.f4-container .container {
width: 450px;
height: 500px;
flex-wrap: wrap;
}
.f5-container .box1 {
order: 1;
}
.f5-container .box2 {
order: 2;
}
.f5-container .box3 {
order: 3;
}
.f6-container .box1,.f6-container .box3, {
flex-grow: 0
}
.f6-container .box2 {
flex-grow: 1
}
.f7-container .container {
width: 300px;
}
.f7-container .box1 {
flex-shrink: 0;
}
.f7-container .box2,
.f7-container .box3,
.f7-container .box4,
.f7-container .box5{
flex-shrink: 1;
}
.f8-container .box1 {
flex-basis: 200px;
}
.f9-container .box2 {
flex: auto;
}
.f10-container .container{
align-items: flex-start;
}