弹性容器的两种类型
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性容器的两种类型</title>
<style>
div {
border: 1px solid red;
margin: 10px 0;
}
.item {
border: 1px solid black;
color: lightskyblue;
padding: 10px;
}
.flex {
display: flex;
}
hr {
height: 2px;
background-color: lightslategray;
}
.inline-flex {
display: inline-flex;
}
</style>
</head>
<body>
<h3>1.块级弹性容器</h3>
<div class="flex">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<div class="flex">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<hr>
<h3>2.行内弹性容器</h3>
<div class="inline-flex">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<div class="inline-flex">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
弹性容器（导航）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性容器（导航）</title>
<style>
nav {
display: flex;
border-bottom: 1px solid lightslategray;
}
a{
text-decoration: none;
padding: 10px 20px;
margin: 0 10px;
background-color: lightslategrey;
color: white;
border-radius: 10px;
}
a:hover, a:focus, a:active {
background-color: lightskyblue;
color: white;
}
</style>
</head>
<body>
<nav>
<a href="">消息</a>
<a href="">联系人</a>
<a href="">看点</a>
<a href="">动态</a>
</nav>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向</title>
<style>
div {
border: 1px solid red;
margin: 10px 0;
}
.item {
border: 1px solid black;
color: lightskyblue;
padding: 10px;
}
.flex {
display: flex;
}
hr {
height: 2px;
background-color: lightslategray;
}
.inline-flex {
display: inline-flex;
}
.row {
flex-direction: row;
}
.row-reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column-reverse {
flex-direction: column-reverse;
}
</style>
</head>
<body>
<h3>1.flex-direction:row(从左到右)</h3>
<div class="flex row">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>2.flex-direction:row-reverse(从右到左)</h3>
<div class="flex row-reverse">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>3.flex-direction:column(从上到下)</h3>
<div class="flex column">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>4.flex-direction:column-reverse(从下到上)</h3>
<div class="flex column-reverse">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
创建网站首页
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建网站首页</title>
<style>
* {
outline: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
nav {
display: flex;
border-bottom: 1px solid lightcoral;
padding-bottom: 0;
}
a {
text-decoration: none;
margin:0 10px;
padding: 10px;
background-color: lightslategrey;
color: white;
border-radius: 10px;
}
header,nav,main,article,footer {
display: flex;
}
body,article{
flex-direction: column;
}
a:hover, a:focus, a:active {
background-color: orangered;
color: white;
}
</style>
</head>
<body>
<header>
<h3>Monster TEST</h3>
</header>
<nav>
<a href="">首页</a>
<a href="">下载</a>
<a href="">课程</a>
<a href="">问答</a>
<a href="">我的</a>
</nav>
<main>
<article>
<img src="https://img.php.cn/upload/webcode/000/001/120/5dbff49f832e5443.jpg" alt="">
<p>PHP中文网</p>
<button>学习</button>
</article>
<article>
<img src="https://img.php.cn/upload/webcode/000/001/120/5dbff49f832e5443.jpg" alt="">
<p>PHP中文网</p>
<button>学习</button>
</article>
<article>
<img src="https://img.php.cn/upload/webcode/000/001/120/5dbff49f832e5443.jpg" alt="">
<p>PHP中文网</p>
<button>学习</button>
</article>
</main>
<footer>
<p>
Copyright © 2018 - 2021 独家原创，永久免费的在线php视频教程，php技术学习阵地！
</p>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
弹性元素溢出与创建多行容器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性元素溢出与创建多行容器</title>
<style>
div {
width: 300px;
border: 1px solid black;
}
.item {
border: 1px solid lightseagreen;
background-color: lightslategrey;
color: white;
padding: 10px;
}
.flex {
display: flex;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}
.wrap-reverse{
flex-wrap: wrap-reverse;
}
</style>
</head>
<body>
<h2>主轴水平方向</h2>
<h3>1.flex-wrap:nowrap不换行</h3>
<div class="flex nowrap">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>2.flex-wrap:wrap换行</h3>
<div class="flex wrap">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>3.flex-wrap:wrap-reverse反向</h3>
<div class="flex wrap-reverse">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
弹性元素溢出与创建多行容器（flex-flow:主轴方向 排列方式）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性元素溢出与创建多行容器</title>
<style>
div {
width: 300px;
border: 1px solid black;
}
.item {
border: 1px solid lightseagreen;
background-color: lightslategrey;
color: white;
padding: 10px;
}
.flex {
display: flex;
}
.nowrap {
/*flex-wrap: nowrap;*/
flex-flow: row nowrap;
}
.wrap {
flex-flow: row wrap;
}
.wrap-reverse{
flex-flow: row wrap-reverse;
}
</style>
</head>
<body>
<h2>主轴水平方向</h2>
<h3>1.flex-wrap:nowrap不换行</h3>
<div class="flex nowrap">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>2.flex-wrap:wrap换行</h3>
<div class="flex wrap">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>3.flex-wrap:wrap-reverse反向</h3>
<div class="flex wrap-reverse">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
弹性元素在主轴上如何分布
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性元素在主轴上如何分布</title>
<style>
div {
width: 300px;
border: 1px solid black;
}
.item {
border: 1px solid lightseagreen;
background-color: lightslategrey;
color: white;
padding: 10px;
}
.flex {
display: flex;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around
{
justify-content: space-around;
}
.space-evenly {
justify-content: space-evenly;
}
</style>
</head>
<body>
<h1>弹性元素在主轴上如何分布</h1>
<h3>1. flex-start: 起点</h3>
<p>单行</p>
<div class="flex nowrap flex-start">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>多行</h3>
<div class="flex wrap flex-start">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>2. flex-end: 终点</h3>
<p>单行</p>
<div class="flex nowrap flex-end">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>多行</h3>
<div class="flex wrap flex-end">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>3. center: 居中</h3>
<p>单行</p>
<div class="flex nowrap center">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>多行</h3>
<div class="flex wrap center">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>4. space-between: 起终边界，相邻平均分配</h3>
<p>单行</p>
<div class="flex nowrap space-between">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>多行</h3>
<div class="flex wrap space-between">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>5. space-around: 起终相等，相邻累加</h3>
<p>单行</p>
<div class="flex nowrap space-around">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>多行</h3>
<div class="flex wrap space-around">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>6. space-evenly: 起终,相邻相等</h3>
<p>单行</p>
<div class="flex nowrap space-evenly">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>多行</h3>
<div class="flex wrap space-evenly">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
弹性元素主轴对齐写导航
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性元素主轴对齐写导航</title>
<style>
nav {
display: flex;
border-bottom: 1px solid lightslategray;
margin-bottom: 50px;
}
a{
text-decoration: none;
padding: 10px 20px;
margin: 0 10px;
background-color: lightslategrey;
color: white;
border-radius: 10px;
}
a:hover, a:focus, a:active {
background-color: lightskyblue;
color: white;
}
.flex-start {
justify-content: flex-start;
}
.center {
justify-content: center;
}
.flex-end {
justify-content: flex-end;
}
</style>
</head>
<body>
<nav class="flex-start">
<a href="">消息</a>
<a href="">联系人</a>
<a href="">看点</a>
<a href="">动态</a>
</nav>
<nav class="center">
<a href="">消息</a>
<a href="">联系人</a>
<a href="">看点</a>
<a href="">动态</a>
</nav>
<nav class="flex-end">
<a href="">消息</a>
<a href="">联系人</a>
<a href="">看点</a>
<a href="">动态</a>
</nav>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
弹性元素在垂直方向(交叉轴)上的对齐方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性元素在垂直方向(交叉轴)上的对齐方式</title>
<style>
div {
width: 300px;
height: 150px;
border: 1px solid black;
}
.item {
border: 1px solid lightseagreen;
background-color: lightslategrey;
color: white;
padding: 10px;
}
.flex {
display: flex;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}
.stretch {
align-items: stretch;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.center {
align-items:center;
}
.space-between {
align-content: space-between;
}
.space-around {
align-content: space-around;
}
.space-evenly {
align-content: space-evenly;
}
</style>
</head>
<body>
<h1>弹性元素在交叉轴上如何分布</h1>
<h3>1. stretch: 默认值, 元素高度自动拉伸充满整个容器</h3>
<p>单行</p>
<div class="flex nowrap stretch">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>2.flex-start: 元素紧贴容器起点</h3>
<p>单行</p>
<div class="flex nowrap flex-start">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>3. flex-end: 元素紧贴容器终点</h3>
<p>单行</p>
<div class="flex nowrap flex-end">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>4. center: 所有元素做为一个整体在容器垂直方向居中显示</h3>
<p>单行</p>
<div class="flex nowrap center">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>5. space-between: 垂直方向首尾行紧贴起止点,其它行平分剩余空间</h3>
<h3>多行</h3>
<div class="flex wrap space-between">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>6. space-around: 起终相等，相邻累加</h3>
<h3>多行</h3>
<div class="flex wrap space-around">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
<h3>7. space-evenly: 起终,相邻相等</h3>
<h3>多行</h3>
<div class="flex wrap space-evenly">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
更快，更方便的完成页面布局，减少代码量，增加可读性，方便后期维护
笔记
