<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3伸缩布局</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微软雅黑';
background-color: #F7F7F7;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
width: 1024px;
margin: 0 auto;
}
.wrapper > section {
min-height: 300px;
margin-bottom: 30px;
box-shadow: 1px 1px 4px #DDD;
background-color: #FFF;
}
.wrapper > header {
text-align: center;
line-height: 1;
padding: 20px;
margin-bottom: 10px;
font-size: 30px;
}
.wrapper section > header {
line-height: 1;
padding: 10px;
font-size: 22px;
color: #333;
background-color: #EEE;
}
.wrapper .wrap-box {
padding: 20px;
}
.wrapper .brief {
min-height: auto;
}
.wrapper .flex-img {
width: 100%;
}
/*全局设置*/
section ul {
/*把所有ul指定成了伸缩盒子*/
display: flex;
/*这里只是一个小的测试*/
/*flex-direction: row-reverse;*/
}
section li {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 10px;
background-color: pink;
}
.flex-start ul {
justify-content: flex-start;
}
.flex-end ul {
justify-content: flex-end;
}
.center ul {
justify-content: center;
}
.space-around ul {
justify-content: space-around;
}
.space-between ul {
justify-content: space-between;
}
</style>
</head>
<body>
<div class="wrapper">
<header>CSS3-伸缩布局详解</header>
<!-- 简介 -->
<section class="brief">
<header>justify-content</header>
<div class="wrap-box">
<p>主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-around、space-between几种方式</p>
</div>
</section>
<!-- 分隔线 -->
<section class="flex-start">
<header>flex-start</header>
<div class="wrap-box">
<p>起始点对齐</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</section>
<section class="flex-end">
<header>flex-end</header>
<div class="wrap-box">
<p>终止点对齐</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</section>
<section class="center">
<header>center</header>
<div class="wrap-box">
<p>居中对齐</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</section>
<section class="space-around">
<header>space-around</header>
<div class="wrap-box">
<p>四周环绕</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</section>
<section class="space-between">
<header>space-between</header>
<div class="wrap-box">
<p>两端对齐</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</section>
</div>
</body>
</html>