<!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>
