实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹性容器的两种类型</title>
<style type="text/css">
.box{
border: 2px dashed #ddd;
margin: 15px;
background: #abcdef;
}
.item{
border: 1px solid;
padding: 20px;
background: red;
}
/*块级-弹性容器*/
.flex{
display: flex;
}
/*行内-弹性容器*/
.inline-flex{
display:inline-flex;
}
nav{
border-bottom:1px solid #000;
display: flex;
}
nav a{
text-decoration: none;
background: red;
color: #000;
padding: 5px 30px;
margin: 0 5px;
border-radius: 5px 5px 0 0;
}
a:hover,a:focus,a:active{
background: #abcdef;
color:white;
}
.row{
flex-direction:row;
}
.row-reverse{
flex-direction:row-reverse;
}
.column{
flex-direction:column;
}
.column-reverse{
flex-direction:column-reverse;
}
.box1{
width: 500px;
border: 5px solid #000;
}
.box2{
width: 500px;
height: 300px;
border: 5px solid #000;
}
.nowrap{
flex-wrap:nowrap;
}
.wrap{
flex-wrap:wrap;
}
.wrap-reverse{
flex-wrap:wrap-reverse;
}
.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;
}
/*align-items:设置单行容器中元素在垂直轴上的排列*/
.stretch{
align-items:stretch;
}
.flex-start{
align-items:flex-start;
}
.flex-end1{
align-items:flex-end;
}
.center1{
align-items:center;
}
/*设置多行元素中弹性元素的对齐方式和空间非配方案*/
.wrap-srtetch{
align-content:stretch;
}
.wrap-flex-start{
align-content:flex-start;
}
.wrap-flex-end{
align-content:flex-end;
}
.wrap-center{
align-content:center;
}
.wrap-space-between{
align-content:space-between;
}
.wrap-space-around{
align-content:space-around;
}
.wrap-space-evenly{
align-content:space-evenly;
}
</style>
</head>
<body>
<h3>块级-弹性容器</h3>
<div class="box flex">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<div class="box flex">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<hr/>
<h3>行内-弹性容器</h3>
<div class="box inline-flex">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<div class="box inline-flex">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<hr/>
<h3>导航</h3>
<nav>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</nav>
<hr/>
<h3>row-默认从左到右,水平排列</h3>
<div class="box flex row">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<h3>row-reverse-从右到左,水平排列</h3>
<div class="box flex row-reverse">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<h3>column-从上到下,垂直排列</h3>
<div class="box flex column">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<h3>column-reverse-从下到上,垂直排列</h3>
<div class="box flex column-reverse">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<h3>nowrap-默认不换行，元素自动缩小填充容器</h3>
<div class="box1 flex row nowrap">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<h3>wrap-换行,弹性元素超出容器边界的还到下一行显示</h3>
<div class="box1 flex row wrap">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<h3>wrap-reversc-换行,弹性元素反向排列</h3>
<div class="box1 flex row wrap-reverse">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>1.flex-start：主轴起点开始排列</h3>
<p>单行</p>
<div class="box1 flex wrap flex-start">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box1 flex wrap flex-start">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>2.flex-end：主轴终点开始排列</h3>
<p>单行</p>
<div class="box1 flex wrap flex-end">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box1 flex flex-end wrap">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>3.center：弹性容器作为一个整体居中显示</h3>
<p>单行</p>
<div class="box1 flex wrap center">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box1 flex center wrap">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>4.space-between：首位元素紧贴起始点 中间元素平分剩余空间</h3>
<p>单行</p>
<div class="box1 flex wrap space-between">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box1 flex space-between wrap">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>5.space-between：每个元素两边空间相等，相邻元素空间累加</h3>
<p>单行</p>
<div class="box1 flex wrap space-around">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box1 flex space-around wrap">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>6.space-evenly：每个元素之间 与元素到起点 终点的距离都相等</h3>
<p>单行</p>
<div class="box1 flex wrap space-evenly">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box1 flex space-evenly wrap">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>导航</h3>
<nav style="justify-content:center;">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</nav>
<hr/>
<h2>弹性元素在垂直轴上分布方式</h2>
<h3>stretch：默认</h3>
<p>单行</p>
<div class="box2 flex wrap stretch">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box2 flex wrap wrap-srtetch">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>flex-start：元素紧贴容器起点</h3>
<p>单行</p>
<div class="box2 flex wrap flex-start">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box2 flex wrap wrap-flex-start">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>flex-end：元素紧贴容器终点</h3>
<p>单行</p>
<div class="box2 flex flex-end1">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box2 flex wrap wrap-flex-end">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>center：所有元素作为一个整体在容器垂直方向居中显示</h3>
<p>单行</p>
<div class="box2 flex center1">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
<p>多行</p>
<div class="box2 flex wrap wrap-center">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>space-between：垂直元素行首位紧贴，其他行平均分配剩余空间空间</h3>
<p>多行</p>
<div class="box2 flex wrap wrap-space-between">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>space-around：每行两边相等，中间行累加</h3>
<p>多行</p>
<div class="box2 flex wrap wrap-space-around">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
<h3>space-evenly：每行两边全部相等</h3>
<p>多行</p>
<div class="box2 flex wrap wrap-space-evenly">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
<span class="item">10</span>
<span class="item">11</span>
<span class="item">12</span>
</div>
<hr/>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>博客</title>
<style type="text/css">
*{
/*outline: 1px solid #ccc;*/
margin: 10px;
padding: 10px;
}
nav{
border-bottom:1px solid #000;
display: flex;
}
nav a{
text-decoration: none;
background: red;
color: #000;
padding: 5px 30px;
margin: 0 5px;
border-radius: 5px 5px 0 0;
}
a:hover,a:focus,a:active{
background: #abcdef;
color:white;
}
body,nav,.main,article{
display: flex;
}
body,article{
flex-direction:column;
}
article>img{
width: 340px;
}
footer{
border-top:1px solid #000;
}
</style>
</head>
<body>
<header><h1>博客</h1></header>
<nav>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</nav>
<div class="main">
<article>
<img src="img/1.jpg">
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<button>哈哈哈</button>
</article>
<article>
<img src="img/1.jpg">
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<button>哈哈哈</button>
</article>
<article>
<img src="img/1.jpg">
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<button>哈哈哈</button>
</article>
</div>
<footer><p>页脚 啦啦啦~</p></footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
