标签：style ade baseline ext 中间 ret class rgba line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 1000px;
margin:0 auto;
}
header{
text-align: center;
line-height: 60px;
}
section{
width: 1000px;
height: 300px;
margin:10px 0;
border:2px solid #ddd;
border-radius: 10px;
background: #fff;
position: relative;
}
section h3{
width: 1000px;
height: 300px;
text-align: center;
line-height: 200px;
color: orange;
background: rgba(0,0,0,0.1);
border-radius: 10px;
display: none;
position: absolute;
top:0;
left:0;
}
section:hover h3{
display: block;
}
.content{
/*margin:25px 0;*/
width: 200px;
height: 150px;
background-image: linear-gradient(#eee,#abc);
border:1px solid purple;
text-align: center;
font-family: "黑体";
color: blue;
font-size: 40px;
}
.item:nth-of-type(1) .content,
.item:nth-of-type(2) .content,
.item:nth-of-type(3) .content,
.item:nth-of-type(4) .content,
.item:nth-of-type(5) .content{
margin:25px auto;
}
.item:nth-of-type(1){
/*将当前元素的父元素设置为flex布局方式,会自动对子元素进行伸缩布局*/
display: flex;
}
.item:nth-of-type(2){
display: flex;
}
.item:nth-of-type(3){
display: flex;
/*column:表示将主轴方向改为列方向从上到下;*/
flex-direction: column;
}
.item:nth-of-type(4){
display: flex;
/* row-reverse:表示将主轴方向改为从右到左;*/
flex-direction: row-reverse;
}
.item:nth-of-type(5){
display: flex;
/* row-reverse:表示将主轴方向改为从下到上;*/
flex-direction: column-reverse;
}
.item:nth-of-type(6){
display: flex;
/*默认值:主轴上的内容在主轴开始方向进行布局;*/
justify-content: flex-start;
}
.item:nth-of-type(7){
display: flex;
/*默认值:主轴上的内容在主轴开始方向进行布局;*/
justify-content: flex-end;
}
.item:nth-of-type(8){
display: flex;
flex-direction: row-reverse;
}
.item:nth-of-type(9){
display: flex;
justify-content: center;
}
/*区别:
1.space-around 每个伸缩项两边的左右外边距相等,伸缩项和伸缩容器的外边距是两个伸缩项之间的距离的一半
2.space-between 两个伸缩项之间的距离相等,不考虑伸缩项与伸缩容器的边距
;*/
.item:nth-of-type(10){
display: flex;
justify-content: space-around;
}
.item:nth-of-type(11){
display: flex;
justify-content: space-between;
}
.item.h500{
height: 600px;
display: flex;
}
.item.h500 h3{
height: 600px;
}
.item:nth-of-type(12){
/*内容分布在侧轴的起始位置一段*/
align-items: flex-start;
}
.item:nth-of-type(13){
/*内容分布在侧轴的末尾位置一段*/
align-items: flex-end;
}
.item:nth-of-type(14){
/*内容分布在侧轴中心位置*/
align-items: center;
}
.item:nth-of-type(15){
/*内容分布与文本的基准线对齐*/
align-items: baseline;
}
.item:nth-of-type(16){
/*内容拉伸填充*/
align-items: stretch;
}
.item:nth-of-type(16) .content{
height: auto;
}
.item:nth-of-type(17){
flex-wrap: wrap;
}
.item:nth-of-type(18){
flex-wrap: nowrap;
}
/*换行后控制多行元素在侧轴方向的布局*/
.item:nth-of-type(19){
/*侧轴方向上所有的元素贴靠到侧轴的起始方向*/
flex-wrap: wrap;
align-content: flex-start;
}
.item:nth-of-type(20){
/*侧轴方向上所有的元素贴靠到侧轴的末尾方向*/
flex-wrap: wrap;
align-content: flex-end;
}
.item:nth-of-type(21){
/*伸缩容器与盒子有外边距*/
flex-wrap: wrap;
align-content: center;
}
.item:nth-of-type(22){
/*伸缩容器与盒子无外边距*/
flex-wrap: wrap;
align-content: space-around;
}
.item:nth-of-type(23){
/*伸缩容器与盒子无外边距*/
flex-wrap: wrap;
align-content: space-between;
}
.item:nth-of-type(24) .content{
height:auto;
}
.item:nth-of-type(24){
/*根据内容所占的行数进行拉伸,默认情况下每一行高度相同*/
flex-wrap: wrap;
align-content: stretch;
}
</style>
</head>
<body>
<div class="container">
<header>
<h2>伸缩布局</h2>
</header>
<section class="item">
<h3>三个盒子水平等分</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<header>
<h2>伸缩布局的主轴</h2>
</header>
<section class="item">
<h3>主轴方向(从左到右)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3>flex-direction: column;(从上到下布局贴靠上边)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3>flex-direction: row-reverse;(从右到左布局贴靠右边)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3>flex-direction: column-reverse;(从下到上布局贴靠下边)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<header>
<h2>主轴方向的内容布局方式(单行从左到右)</h2>
</header>
<section class="item">
<h3> justify-content: flex-start;(布局贴靠左边) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: flex-end;(布局贴靠右边) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> flex-direction: row-reverse;(从右到左布局贴靠右边) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: center;(布局在中间) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: space-around;(等距分开与父容器有一半边距)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: space-between;(等距分开与父容器无边距)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<header>
<h2>侧轴方向的内容布局方式(单行从左到右)</h2>
</header>
<section class="item h500">
<h3> align-items: flex-start;(布局贴靠上边) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: flex-end;(布局贴靠下边) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: center;(布局在垂直中间) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: baseline;(布局与文字基准线对齐) </h3>
<div class="content">1</div>
<div class="content" style="line-height: 200px;">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: stretch;(布局高度拉伸填充) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<header>
<h2>控制主轴元素换行</h2>
</header>
<section class="item h500">
<h3> flex-wrap: wrap;(换行) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> flex-wrap: nowrap;(不换行) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<header>
<h2>换行后侧轴方向的布局(换行情况下,多行从左到右,从上到下)</h2>
</header>
<section class="item h500">
<h3> align-content: flex-start;(布局紧靠上边) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: flex-end;(布局紧靠下边) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: center;(布局垂直中间) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: space-around;(每行布局等距分开与父容器有一般边距) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: space-between;(每行布局等距分开与父容器无边距) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: stretch;(每行拉升相同高度填满父容器) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
</div>
</body>
</html>
原地址：http://www.qdfuns.com/notes/45493/f49dddfc2716beb3d79b9a5e58bf0096.html
标签：style ade baseline ext 中间 ret class rgba line
原文地址：http://www.cnblogs.com/oldZhangFeng/p/7465087.html
