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是一样的
弹性元素的样式![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/10f08cd34fabdd3b2f1d2669287637f3.png)
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>