flex布局
2022-03-15 本文已影响0人
似朝朝我心
注意：使用了flex布局以后，子元素的float、clear和vertical-align属性将会失效。
父容器与子容器的关系
大的叫flex容器，flex容器里面包含很多flex项目（小容器）。
子容器默认是横向排布的。
flex布局原理
通过给外围的父盒子添加display:flex属性来达到控制子盒子的位置和排列方式，即父亲控制孩子。
父项属性
-
justify-content属性
-
align-content 要搭配换行使用，单行不生效
-
flex-flow属性
子项属性
- flex属性，分配剩余空间
- algin-self 是单独一个人排列
- order 数值越小越靠前 -1 0 1
案例
<!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>Document</title>
<link rel="stylesheet" href="CSS/normalize.min.css">
<!-- 先导入初始化样式 -->
<link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<!-- 顶部搜索 -->
<div class="search-box">
<div class="search">
<img src="Images/magnifier.png" alt="">
搜索:目的地/酒店/
</div>
<a href="#" class="user">
<img src="Images/user.png" alt="">
我 的
</a>
</div>
<!-- banner图区域 -->
<div class="banner">
<img src="Upload/banner.png" alt="">
</div>
<!-- 导航区域 -->
<ul class="nav">
<li>
<a href="#">
<span class="icon">
<img src="Images/user.png" alt="" title="景点.玩乐">
</span>
<span>景点.玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="Images/user.png" alt="" title="景点.玩乐">
</span>
<span>景点.玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="Images/user.png" alt="" title="景点.玩乐">
</span>
<span>景点.玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="Images/user.png" alt="" title="景点.玩乐">
</span>
<span>景点.玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<img src="Images/user.png" alt="" title="景点.玩乐">
</span>
<span>景点.玩乐</span>
</a>
</li>
</ul>
<!-- 功能区 -->
<nav>
<div class="nav-common">
<div class="nav-items">
<a href="#">海外酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
<a href="#">海外酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
<a href="#">海外酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
</nav>
<!-- 子导航 -->
<ul class="sub-nav">
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="sub-nav-icon">
<img src="Images/user.png" alt="">
</span>
<span>电话费</span>
</a>
</li>
</ul>
<!-- 主体模块 -->
<div class="main">
<div class="main-header">
<ul class="title">
<li>热门活动</li>
<li>广告</li>
<li></li>
<li>
<a href="#">获取更多福利</a>
</li>
</ul>
</div>
<div class="main-body">
<div class="row">
<a href="#"><img src="Images/img1" alt=""></a>
<a href="#"><img src="Images/img1" alt=""></a>
</div>
<div class="row">
<a href="#"><img src="Upload/banner.png" alt=""></a>
<a href="#"><img src="Upload/banner.png" alt=""></a>
</div>
<div class="row">
<a href="#"><img src="Upload/banner.png" alt=""></a>
<a href="#"><img src="Upload/banner.png" alt=""></a>
</div>
</div>
</div>
<div class="tabbar">
<ul class="tabbar-list">
<li>
<a class="" href="#">
<span class="icon">
<img src="Images/user.png" alt="">
</span>
<span>拨话预定</span>
</a>
</li>
<li>
<a class="" href="#">
<span class="icon">
<img src="Images/user.png" alt="">
</span>
<span>拨话预定</span>
</a>
</li>
<li>
<a class="" href="#">
<span class="icon">
<img src="Images/user.png" alt="">
</span>
<span>拨话预定</span>
</a>
</li>
</ul>
</div>
</body>
</html>
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
/* background: #f2f2ff; */
background: black;
overflow-x: hidden;
height: 2000px;
}
a {
text-decoration: none;
}
div {
box-sizing: border-box;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 搜索区域 */
.search-box {
/* 固定定位和父子没有关系，他以屏幕为准 */
display: flex;
position: fixed;
top: 0;
left: 50%;
/* 固定的盒子需有宽度 */
width: 100%;
height: 44px;
max-width: 540px;
min-width: 320px;
background: #f6f6f6;
transform: translateX(-50%);
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.search {
flex:1;
height: 26px;
line-height: 24px;
border: 1px solid #eee;
margin: 7px 10px;
border-radius: 5px;
position: relative;
font-size: 12px;
padding-left: 25px;
box-shadow: rgba(0,0,0,.2);
}
.search img {
width: 15px;
height: 15px;
position: absolute;
left: 5px;
top: 5px;
}
.user {
width: 44px;
height: 43px;
background-color: antiquewhite;
font-size: 14px;
text-align: center;
}
.user img {
margin: 2px auto 0;
width: 24px;
height: 24px;
display: block;
}
/* banner图区域 */
.banner {
padding-top: 44px;
}
.banner img {
width: 100%;
}
/* 导航区域 */
.nav {
height: 64px;
background-color: #fff;
margin: 3px 4px;
border-radius: 8px;
display: flex;
}
.nav li {
flex: 1;
}
.nav li a {
display: flex;
flex-direction: column;
align-items: center;
}
.nav li a .icon {
width: 32px;
height: 32px;
background-color: palegreen;
margin-top: 6px;
border-radius: 50%;
}
.nav li a .icon img {
width: 100%;
height: 100%;
}
/* 功能区 */
nav {
border-radius: 8px;
margin: 0 4px 3px; /*上0 左右4 下3*/
overflow: hidden; /*让圆角显示出来*/
}
nav .nav-common {
height: 88px;
display: flex;
}
nav .nav-common:nth-child(1) {
background: linear-gradient(to right,#FAFA55,#FA994D);
}
nav .nav-common:nth-child(2) {
background: linear-gradient(to left,#4b90ed,#53bced);
}
nav .nav-common:nth-child(3) {
background: linear-gradient(to left,#34c2a9,#6cd559);
}
nav .nav-common:nth-child(2) {
margin: 3px 0;
}
nav .nav-common .nav-items {
flex:1;
display: flex;
flex-direction: column;
}
nav .nav-common .nav-items:nth-child(1) a{
border: 0;
}
nav .nav-common .nav-items:nth-child(-n+2) {
/* -n+2 就是前面2条白线 */
border-right: 1px solid #fff;
}
nav .nav-common .nav-items a {
flex: 1;
text-align: center;
line-height: 44px;
/* color: #ccc; */
font-size: 14px;
text-shadow: 1px 1px rgba(0,0,0,.2);
}
nav .nav-common .nav-items a:nth-child(1) {
border-bottom: 1px solid #fff;
}
/* 子导航区域 */
.sub-nav {
display: flex;
flex-wrap: wrap;
border-radius: 8px;
background-color: #fff;
margin: 0 4px;
padding: 5px 0;
}
.sub-nav li {
flex: 20%; /*相对于父盒子来分，每个子盒子占20%*/
}
.sub-nav a {
display: flex;
flex-direction: column;
align-items: center;
}
.sub-nav .sub-nav-icon {
width: 28px;
height: 28px;
margin-top: 4px;
background-color: #34c2a9;
}
.sub-nav .sub-nav-icon img {
width: 100%;
height: 100%;
}
/* 主体区域 */
.main {
border-top: 1px solid #bbb;
background-color: #fff;
margin: 4px;
}
.main-header {
height: 44px;
border-bottom: 1px solid #ccc;
position: relative;
}
.main-header .title {
display: flex;
height: 44px;
align-items: center; /*要有高度，不然失效*/
}
.main-header .title li {
margin: 0 10px;
}
.main-header .title li:nth-child(1) {
font-weight: bolder;
color: #FA994D;
user-select: none;
text-shadow: 1px 1px #FA994D;
/* flex: 1; */
}
.main-header .title li:nth-child(2) {
background-color: #bbb;
padding: 4px;
border-radius: 8px;
font-size: 12px;
color: #f6f6f6;
user-select: none;
}
.main-header .title li:nth-child(3) {
flex: 40%;
}
.main-header .title li:nth-child(4) {
text-align: right; /*控制子元素，单独靠右*/
flex: 15%;
width: 200px;
border-radius: 15px;
padding: 3px 20px 3px 10px;
background: linear-gradient(to left,#ff506c,#ff6bc6);
}
.main-header .title li:nth-child(4) a {
color: white;
}
.main-header .title li:nth-child(4)::after { /*绘制大于号*/
content: "";
position: absolute;
top: 18px;
right: 20px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
/* 主体下方 */
.row {
display: flex;
}
.row a {
flex: 1;
border-bottom: 1px solid #eee;
}
.row a:nth-child(1) {
border-right: 1px solid #eee;
}
.row a img {
width: 100%;
width: 100%;
}
/* tabbar */
.tabbar {
height: 44px;
background-color: #fff;
margin: 4px;
}
.tabbar-list {
display: flex;
}
.tabbar-list li {
flex: 1;
}
.tabbar-list li a {
display: flex;
align-items: center;
flex-direction: column;
}
.tabbar-list li a .icon {
width: 25px;
height: 25px;
}
.tabbar-list li a .icon img{
width: 100%;
height:100%;
}
