Flex布局(弹性布局,弹性盒布局)
flex布局,移动端不用考虑兼容问题,pc端需要考虑(检测https://caniuse.com/)。
flex布局原理:给父盒子添加flex属性,来控制子盒子的位置和排列方式。
给父盒子设为flex布局之后,子元素的float、clear、和vertical-align都将失效。flex将元素横向或纵向一排显示,不需要浮动,设置主轴侧轴对齐不需要再这素质垂直居中了。
属性
父级属性
flex-direction:我们的元素是跟着主轴来排列的
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 主轴默认为X,侧轴就是Y */
/* flex-direction: row; */
/* 翻转 */
/* flex-direction: row-reverse; */123变321
/* 主轴设置为Y轴,侧轴则为X */
flex-direction: column;
}
主轴上子元素对齐:justify-content
/* 默认的主轴是 x 轴 row */
flex-direction: row;
/* justify-content: 是设置主轴上子元素的排列方式 */
justify-content: flex-start;
justify-content: flex-end;
/* 让我们子元素居中对齐 */
justify-content: center;
/* 平分剩余空间,盒子左右或上下平等 */
justify-content: space-around;
/* 先两边贴边, 在分配剩余的空间 */
justify-content: space-between;
flex-wrap:子元素是否换行
/* flex布局中,默认的子元素是不换行的, 如果装不开,会缩小子元素的宽度,放到父元素里面 */
flex-wrap: nowrap;
flex-wrap: wrap;
align-items:设置侧轴子元素排列,单行
/* 默认的主轴是 x 轴 row ,现在换成y轴 column*/
flex-direction: column;
justify-content: center;
align-items: center;
拉伸,子盒子不要给宽度或者高度(看是X还是Y轴)!!:align-items: stretch;
align-content:多行,在换行情况flex-wrap下出现,在单行没有效果
/* 换行 */
flex-wrap: wrap;
/* 因为有了换行,此时我们侧轴上控制子元素的对齐方式我们用 align-content */
/* align-content: flex-start; */
/* align-content: center; */
/* align-content: space-between; */两端对齐 再平均分配剩余空间
align-content: space-around;平均分配剩余空间给伸缩项的两端
align-content 和align-items区别
-
align-items 适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
-
align-content适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
-
总结:单行找align-items 多行找 align-content
flex-flow:direction wrap;主轴方向换行属性合写
子级属性
flex:子项占的份数,定义子项分配剩余空间,用flex来表示占多少份数(flex=num或者数字;)
计算公式 --- 当前元素的宽度 = 当前伸缩项的flex数值 / 当前所有兄弟的伸缩项的flex数值相加的和
左右设定,中间flex:1
<section>
<div></div>
<div></div>
<div></div>
</section>
section {
display: flex;
width: 60%;
height: 150px;
background-color: blue;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: bisque;
}
section div:nth-child(3) {
width: 200px;
height: 150px;
background-color: black;
}
align-self:给子元素加侧轴对齐方式,可以单独选择子元素
只让第n个盒子对齐 align-self:flex-end;
order:值是数字,不带单位。值越小,排列越靠前,默认为0
案例(携程)
技术选型:
搭建结构:
设置视口标签以及引入初始化样式
设置常用初始化样式(居中,最大最小宽度,高亮消除)
结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>携程在手,说走就走</title>
</head>
<body>
<!-- 顶部搜索 -->
<div class="search-index">
<div class="search-left">搜索:目的地/酒店/景点/航班号</div>
<a href="#" class="user">我的</a>
</div>
<!-- 焦点图模块 -->
<div class="focus">
<img src="./upload/focus.jpg" alt="">
</div>
<!-- 导航 -->
<ul class="nav">
<li>
<a href="#" title="景点玩乐">
<div class="top"></div>
<span>景点玩乐</span>
</a>
</li>
<li>
<a href="#" title="周边游">
<div class="top"></div>
<span>周边游</span>
</a>
</li>
<li>
<a href="#" title="美食林">
<div class="top"></div>
<span>美食林</span>
</a>
</li>
<li>
<a href="#" title="一日游">
<div class="top"></div>
<span>一日游</span>
</a>
</li>
<li>
<a href="#" title="当地攻略">
<div class="top"></div>
<span>当地攻略</span>
</a>
</li>
</ul>
<!-- 次导航 -->
<div class="second-nav">
<div class="second">
<div class="second-left">
<a href="#">海外酒店</a>
</div>
<div class="second-center">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="second-right">
<a href="#">特价商品</a>
<a href="#">民宿客栈</a>
</div>
</div>
<div class="second">
<div class="second-left">
<a href="#">海外酒店</a>
</div>
<div class="second-center">
<a href="#">火车票</a>
<a href="#">特价车票</a>
</div>
<div class="second-right">
<a href="#">特价</a>
<a href="#">商品</a>
</div>
</div>
<div class="second">
<div class="second-left">
<a href="#">海外酒店</a>
</div>
<div class="second-center">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="second-right">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
</div>
<!-- entry模块 -->
<ul class="entry">
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
<li><a href="#"><span></span><span>旅行</span></a></li>
</ul>
<!-- 热门活动 -->
<div class="sales-box">
<div class="sales-hd">
<h2>热门活动</h2>
<a href="#">获取更多福利</a>
</div>
<div class="sales-bd">
<div class="row">
<a href="#"><img src="./upload/pic1.jpg" alt=""></a>
<a href="#"><img src="./upload/pic2.jpg" alt=""></a>
</div>
<div class="row">
<a href="#"><img src="./upload/pic3.jpg" alt=""></a>
<a href="#"><img src="./upload/pic4.jpg" alt=""></a>
</div>
<div class="row">
<a href="#"><img src="./upload/pic5.jpg" alt=""></a>
<a href="#"><img src="./upload/pic6.jpg" alt=""></a>
</div>
</div>
</div>
<!-- 底部导航 -->
<footer>
<div class="col"><span></span><span>电话预定</span></div>
<div class="col"><span></span><span>电话预定</span></div>
<div class="col"><span></span><span>电话预定</span></div>
</footer>
</body>
</html>
样式:
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
/* height: 2000px; */
}
div {
/* 大量的div用css3模型 */
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul {
list-style: none;
/* 清除边距 */
margin: 0;
padding: 0;
}
.search-index {
position: fixed;
top: 0;
/* 让盒子居中 */
left: 50%;
transform: translateX(-50%);
/* 兼容老版本浏览器 提倡 */
-webkit-transform: translateX(-50%);
/* 固定定位盒子要写宽度宽度100%;因为固定定位是参照屏幕的,所以单独给固定定位的盒子加最大最小宽度,*/
width: 100%;
max-width: 540px;
min-width: 320px;
height: 50px;
/* background-color: pink; */
background-color: #f6f6f6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display: flex;
}
.search-left {
flex: 1;
height: 26px;
/* background-color: orange; */
border: 1px solid #ccc;
position: relative;
margin: 7px 10px;
border-radius: 5px;
font-size: 12px;
color: #ccc;
/* css3盒子模型,所以内容有24,因此想要文本居中减掉边框 */
line-height: 24px;
padding-left: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.search-left::before {
position: absolute;
content: '';
/* 加了定位之后,设置宽高生效 */
/* display: block; */
height: 15px;
width: 15px;
top: 5px;
left: 5px;
background: url(../images/sprite.png) no-repeat;
background-size: 104px auto;
background-position: -59px -279px;
}
.user {
height: 44px;
width: 44px;
/* background-color: purple; */
font-size: 12px;
text-align: center;
}
.user::before {
content: '';
display: block;
width: 23px;
height: 23px;
background: url(../images/sprite.png) no-repeat;
background-size: 104px auto;
background-position: -59px -194px;
margin: 5px auto -2px;
}
/* 焦点图 */
.focus {
padding-top: 44px;
}
.focus img {
width: 100%;
}
/* 导航栏 */
.nav {
display: flex;
height: 64px;
border-radius: 8px;
background-color: #fff;
margin: 3px 4px;
}
.nav li {
flex: 20%;
}
.nav a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #222;
font-size: 14px;
}
li a .top {
width: 32px;
height: 32px;
margin-top: 8px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
}
li:nth-child(2) a .top {
background: url(../images/localnav_bg.png) no-repeat 0 -32px;
background-size: 32px auto;
}
li:nth-child(3) a .top {
background: url(../images/localnav_bg.png) no-repeat 0 -64px;
background-size: 32px auto;
}
li:nth-child(4) a .top {
background: url(../images/localnav_bg.png) no-repeat 0 -96px;
background-size: 32px auto;
}
li:nth-child(5) a .top {
background: url(../images/localnav_bg.png) no-repeat 0 -128px;
background-size: 32px auto;
}
/* 次导航 */
.second-nav {
border-radius: 8px;
overflow: hidden;
margin: 0 4px 3px;
}
.second {
height: 88px;
display: flex;
text-align: center;
}
.second:nth-child(1) {
/* 背景渐变必须添加浏览器私有前缀 */
background: -webkit-linear-gradient(left, #fa5a55, #fa994f);
}
.second:nth-child(2) {
margin: 3px auto;
background: -webkit-linear-gradient(left, #4b90ed, #53bced);
}
.second:nth-child(3) {
background: -webkit-linear-gradient(left, #34c2a9, #6cd559);
}
.second-left {
flex: 33.33%;
border-right: 1px solid #ccc;
background: url(../images/hotel.png) no-repeat bottom center;
background-size: 121px auto;
}
.second-left:nth-child(2) {
background: url(../images/subnav-bg.png) no-repeat bottom center;
background-size: 121px auto;
}
.second-left:nth-child(3) {
background: url(../images/hotel.png) no-repeat bottom center;
background-size: 121px auto;
}
.second-center {
border-right: 1px solid #ccc;
}
.second-center,
.second-right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 33.33%;
border-bottom: 1px solid #ccc;
}
.second a {
line-height: 44px;
width: 100%;
color: #fff;
text-shadow: 1px 1px 1px #fff;
}
.second-center a,
.second-right a {
flex: 50%;
}
.second-center a:nth-child(1),
.second-right a:nth-child(1) {
border-bottom: 1px solid #fff;
}
/* entry模块 */
.entry {
display: flex;
flex-wrap: wrap;
margin-top: 6px;
border-radius: 8px;
background-color: #fff;
margin: 0 4px;
}
.entry li {
flex: 20%;
height: 60px;
/* background-color: pink; */
}
.entry li a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #000;
}
.entry li span:nth-child(1) {
height: 28px;
width: 28px;
/* background-color: orange; */
background: url(../images/subnav-bg.png) no-repeat;
margin-top: 4px;
background-size: 28px auto;
}
/* 热门活动 */
.salse-box {
border-top: 1px solid #bbb;
margin: 4px;
height: 44px;
}
.sales-hd {
position: relative;
height: 44px;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.sales-hd h2 {
/* position: relative; */
text-indent: -999px;
overflow: hidden;
}
.sales-hd h2::before {
position: absolute;
top: 10px;
left: 20px;
content: '';
width: 79px;
height: 15px;
background: url(../images/hot.png) no-repeat 0 -18px;
background-size: 75px auto;
}
.sales-hd a {
position: absolute;
right: 5px;
top: 5px;
background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);
border-radius: 8px;
color: #fff;
padding: 3px 20px 3px 10px;
font-size: 12px;
}
.sales-hd a::after {
content: '';
position: absolute;
top: 10px;
right: 9px;
width: 7px;
height: 7px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(45deg);
}
.row {
display: flex;
}
.row a {
flex: 50%;
border-bottom: 1px solid #ccc;
}
.row a:nth-child(1) {
border-right: 1px solid #ccc;
}
.row a img {
width: 100%;
height: 100%;
}
footer {
margin-top: 8px;
background-color: #fff;
display: flex;
height: 44px;
}
footer .col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
footer span:nth-child(1) {
margin-top: 3px;
height: 30px;
width: 30px;
background: url(../images/sprite.png) no-repeat -55px -194px;
background-size: 104px auto;
}
黑马
背景颜色渐变
/* 默认从上到下 */
background: -webkit-linear-gradient(red, blue, green);
/* 可以加方向 */
background: -webkit-linear-gradient(top left, red, blue, green);