Flex
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
ul{
width:200px;
list-style:none;
border:10px solid red;
display:flex;
/* display:inline-flex; */
flex-direction:row;
}
li{
width:200px;
height:200px;
background-color:#bfa;
font-size:50px;
/* float:left; */
}
li:nth-child(1){
/* flex-grow:1; */
flex-shrink:1;
}
li:nth-child(2){
background-color:yellow;
/* flex-grow:2; */
flex-shrink:2;
}
li:nth-child(3){
background-color:pink;
/* flex-grow:3; */
flex-shrink:3;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
弹性容器上的样式
下面展示下align-items和align-content的区别
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
ul{
width:600px;
/* 父元素此时指定了高度 */
height:800px;
list-style:none;
border:10px solid red;
display:flex;
flex-direction:row;
/* 设置元素主轴空白处理方式 */
/* justify-content:flex-start; */
/* 设置主轴的元素是否换行 */
flex-wrap:wrap;
/* align-item */
/* justify-content:center; */
/* align-items:center; */
/* align-content:center; */
/* align-content:space-between; */
align-items:stretch;
/* align-content:flex-end; */
}
li{
width:200px;
/* 父元素的子元素此时不指定高度 */
/* height:200px; */
background-color:#bfa;
font-size:50px;
flex-shrink: 0;
line-height:100px;
text-align:center;
}
ul > li:nth-child(1){
background-color:#bfa;
}
ul > li:nth-child(2){
background-color:yellow;
}
ul > li:nth-child(3){
background-color:pink;
}
ul > li:nth-child(4){
background-color:silver;
}
ul > li:nth-child(5){
background-color:tomato;
}
</style>
</head>
<body>
<ul>
<li>
1
</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>
1
</li>
<li>
2
<div>2</div>
</li>
</ul>
</body>
</html>
align-items:stretch：每个元素的侧轴方向的长度相等（但是值得注意的是每个主轴对应的侧轴，从上面的看出第一行和第二行元素侧轴方向的长度不一样）
此时，可以发现，align-items:stretch(默认值)以及align-items:baseline（对文字而言的），此时元素的每个主轴方向上的侧轴长度会拉伸，并且长度相等
align-items:flex-start、flex-end、center的话，这个每个主轴的侧轴会分别分距离
align-content:flex-start、flex-end、center、space-around、space-evenly、space-between
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
ul{
width:600px;
/* 父元素此时指定了高度 */
height:800px;
list-style:none;
border:10px solid red;
display:flex;
flex-direction:row;
/* 设置元素主轴空白处理方式 */
/* justify-content:flex-start; */
/* 设置主轴的元素是否换行 */
flex-wrap:wrap;
/* align-item */
/* justify-content:center; */
/* align-items:center; */
/* align-content:center; */
/* align-content:space-between; */
/* align-items:base-line; */
align-content:flex-start;
}
li{
width:200px;
/* 父元素的子元素此时不指定高度 */
/* height:200px; */
background-color:#bfa;
font-size:50px;
flex-shrink: 0;
line-height:100px;
text-align:center;
}
ul > li:nth-child(1){
background-color:#bfa;
}
ul > li:nth-child(2){
background-color:yellow;
}
ul > li:nth-child(3){
background-color:pink;
}
ul > li:nth-child(4){
background-color:silver;
}
ul > li:nth-child(5){
background-color:tomato;
}
</style>
</head>
<body>
<ul>
<li>
1
</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>
1
</li>
<li>
2
<div>2</div>
</li>
</ul>
</body>
</html>
align-content:flex-start、flex-end、center这个要考虑不需要考虑每个主轴的侧轴元素之间的距离
align-content:space-around、space-evenly、space-between
align-content:space-around、space-evenly、space-between是针对侧轴方向上的元素来说的，不像align-content:flex-start、flex-end、center一样，他们每个主轴对应的侧轴方向的可能出现空白
但是，值得注意是，align-content的所有属性，在弹性元素没有确定高的情况下，每个主轴对应侧轴方向的元素的高度是等高的，这个和同样条件（弹性元素的高没有确定）下的align-items:stretch、baseline是一样的
弹性元素的样式
flex-shrink:基本上元素越大，缩减的越多（虽然缩减大小和元素的大小和空白的缩减有关）
弹性元素中order的使用，可以实现，不在结构上调整使得元素的排列顺序发生变化，而是直接通过order就可以重新排列元素的顺序
淘宝导航练习
注意使用弹性盒进行水平布局相对于float进行水平布局的好处有哪些？
- 使用弹性盒布局，可以使得父元素的在缩减的时候，其内容区的子元素是仍然可以在视野范围内的，不会出现溢出的现象，而且元素的大小可以随着子元素的大小变化而变化
弹性盒的感受，可以利用下面的程序去感受
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
.nav{
width:100%;
background-color:#bfa;
}
.nav .nav-inner{
display:flex;
justify-content:space-around;
}
.item{
width:18%;
/* flex:auto; */
background-color:pink;
text-align:center;
}
.item a{
text-decoration:none;
color:#333;
}
.item a span{
margin-top:111px;
}
.item img{
width:100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<!-- 创建一个外部容器 -->
<nav class="nav">
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="../img/16/1.png" alt="">
<span>天猫</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/2.png" alt="">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/3.png" alt="">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/4.png" alt="">
<span>外卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/5.png" alt="">
<span>天猫超市</span>
</a>
</div>
</div>
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="../img/16/6.png" alt="">
<span>充值中心</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/7.png" alt="">
<span>飞猪旅行</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/8.png" alt="">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/9.png" alt="">
<span>拍卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/16/10.png" alt="">
<span>分类</span>
</a>
</div>
</div>
</nav>
</body>
</html>
对于上面的程序，要注意以下几点：
1. img的宽度如果不设置为100%的话，那个图片是没有居中效果的，想想这是为什么呢？比如：此时把img的宽度设置为50%，这里的百分之五十是相对于.item的，这就导致了其宽度不会随着item的变化而左右均匀变化
img可以理解为一个行内块元素，所以会出现和span中的文字在一行的情况
为了解决img居中的情况，我们可以采用以下解决办法
上面这个弹性盒的小练习，要继续品味下，学习下里面的思想，体会下弹性盒布局和float布局的差别和好处
注意这个地方，由于.title是没有明确给出高度的，而且h2和more也是没有明确给出高度的，所以这个地方使用align-content:center(通过处理父元素的空白来处理居中，进而处理元素的弹性元素的垂直对齐)是实现不了“最新课程”以及“more+”的垂直对齐的，因为，由于它们字体大小的一个原因，所以，这两个字的大小的中心点将不会在一个水平线上，要解决这个问题，这里只能使用align-items：center(通过处理弹性元素的项与项的垂直对齐)
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
