弹性盒模型
目的:
1、提供一种更加有效的方式来布置、对齐和分布在容器中间的各项内容,即使他们的大小 是未知的变化的
2、让容器有能力改变项目的宽和高,以填满可用空间
属性:
1.display:flex/display:inline-flex 适用于父类元素,声明要使用弹性盒模型
2.flex-direction 排列顺序 (写在父级css中,但是作用于父级)
值:row 横向 row-reverse 反横向 column 纵向 column-reverse 反纵向
3.flex-wrap 是否换行 (写在父级,作用于子级)
值:nowrap 不换行 wrap 换行 wrap-reverse 反转wrap排列
4.justify-content 检索弹性盒子在x轴方向上的对齐方式 (写在父级,作用于子级)
值:flex-start 左对齐 flex-end 右对齐 center 居中
space-between 两端对齐居中 space-around等间分布
5.align-items 检索盒子在Y轴上的对齐方式 (写在父级,作用于子级)
值:flex-start 置顶 flex-end 置底 center 垂直居中
baseline 与基线对齐 strech 置顶+置底,高度受min-width与max-width制约
6.align-content 检索换行时对齐方式 (写在父级,作用于子级)
值:flex-start 置顶 flex-end 置底 center 居中
space-between 上下置顶+置底,中间居中 space-around 纵向平分空间,各行居中显示
7.order 排列顺序 (写在子级,值越小,排位越靠前)
8.flex-grow :n 写在子级,按比例分配剩余空间
案例:去哪网
<!DOCTYPE html>
<html lang="en">
<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>去哪网</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.pc{
display: none;
}
@media screen and (min-width: 760px){
.pc{
display: block;
font-size: 40px;
text-align: center;
}
.qn{
display: none;
}
}
body{
padding-bottom: 53px;
}
.tabbar{
height: 52px;
width: 100%;
border-top: 1px solid lightgray;
background-color: #fff;
position: fixed;
bottom: 0;
/* 弹性布局 */
display: flex;
/* 等间分布 */
justify-content: space-around;
}
.tabbar a{
display: block;
width: 20%;
height: 52px;
/* background-color: gold; */
text-align: center;
}
.tabbar a img{
width: 20px;
height: 20px;
}
.tabbar a p{
font-size: 12px;
height: 20px;
line-height: 20px;
}
header{
display: flex;
flex-wrap: wrap;
}
header .item{
width: 20%;
text-align: center;
margin-top: 10px;
}
header .item img{
width: 30%;
}
main{
overflow: hidden;
}
main .visit{
height: 60px;
line-height: 60px;
font-size: 35px;
font-weight: 900;
margin-left: 40px;
margin-top: 30px;
/* background-color: gold; */
}
main .cube{
height: 80px;
/* background-color: pink; */
}
main .cube p{
float: left;
height: 60px;
line-height: 60px;
width: 200px;
text-align: center;
border: 1px solid #ebebeb;
margin-top: 10px;
margin-left: 30px;
border-radius: 10px;
font-size: 22px;
color: #666;
}
main .cube p:nth-of-type(1){
background-color: #00c0c8;
color: #fff;
}
main .pics{
display: flex;
flex-wrap: wrap;
/* height: 680px; */
}
main .pics .pic{
width: 42%;
/* height: 300px; */
/* background-color: green; */
/* background-image: url(../img/去哪网/pic/2.jpg); */
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
overflow: hidden;
/* border-radius: 10px; */
margin-left: 5%;
/* margin-top: 10px; */
}
main .pics .pic p:nth-of-type(1){
color: #fff;
height: 40px;
line-height: 40px;
font-size: 26px;
font-weight: 540;
margin-top: 93px;
width: 80%;
margin-left: 10%;
text-align: center;
background-color: rgba(0,0,0,.7);
}
main .pics .pic p:nth-of-type(2){
color: gold;
height: 36px;
line-height: 36px;
font-size: 24px;
font-weight: 540;
width: 80%;
margin-left: 10%;
text-align: center;
background-color: rgba(0,0,0,.7);
}
main .pics .pic p:nth-of-type(3){
height: 40px;
line-height: 40px;
font-size: 25px;
margin-left: 10px;
margin-top: 5px;
}
main .pics .pic p:nth-of-type(4){
color: #ff7415;
height: 60px;
line-height: 60px;
font-size: 36px;
margin-left: 10px;
}
</style>
</head>
<body>
<p class="pc">请使用移动端打开</p>
<div class="qn">
<!-- 底部导航栏 -->
<div class="tabbar">
<a href="#">
<img src="../img/去哪网/tab/quna.png" alt="">
<p>首页</p>
</a>
<a href="#">
<img src="../img/去哪网/tab/quna.png" alt="">
<p>首页</p>
</a>
<a href="#">
<img src="../img/去哪网/tab/quna.png" alt="">
<p>首页</p>
</a>
<a href="#">
<img src="../img/去哪网/tab/quna.png" alt="">
<p>首页</p>
</a>
</div>
<!-- 头部 -->
<header>
<div class="item">
<img style="width: 50%;" src="../img/去哪网/icon/1.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img style="width: 50%;" src="../img/去哪网/icon/2.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img style="width: 50%;" src="../img/去哪网/icon/3.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img style="width: 50%;" src="../img/去哪网/icon/4.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img style="width: 50%;" src="../img/去哪网/icon/5.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/6.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/7.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/8.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/9.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/10.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/11.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/12.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/13.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/14.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/15.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/16.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/17.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/18.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/19.png" alt="">
<p>酒店</p>
</div>
<div class="item">
<img src="../img/去哪网/icon/20.png" alt="">
<p>酒店</p>
</div>
</header>
<main>
<p class="visit">特惠度假</p>
<div class="cube">
<p>当季热门度假</p>
<p>今日特惠度假</p>
</div>
<div class="pics" >
<div style="background-image: url(../img/去哪网/pic/2.jpg);" class="pic">
<p>石家庄-稻城亚丁</p>
<p>5天跟团游</p>
<p>含往返飞机票+4晚住宿</p>
<p>¥ 8924</p>
</div>
<div style="background-image: url(../img/去哪网/pic/1.jpg);" class="pic">
<p>石家庄-丽江</p>
<p>5天跟团游</p>
<p>含往返飞机票+4晚住宿</p>
<p>¥ 4638</p>
</div>
<div style="background-image: url(../img/去哪网/pic/3.jpg);" class="pic">
<p>石家庄-三亚</p>
<p>5天跟团游</p>
<p>含往返飞机票+4晚住宿</p>
<p>¥ 2904</p>
</div>
<div style="background-image: url(../img/去哪网/pic/4.jpg);" class="pic">
<p>石家庄-三沙</p>
<p>5天跟团游</p>
<p>含往返飞机票+4晚住宿</p>
<p>¥ 17158</p>
</div>
</div>
</main>
</div>
</body>
</html>