CSS3 flex 布局
一点感想: 暑假和伙伴们一起做了一个简单的项目，完成一个图书商城的项目，我们主要负责页面的构架，结果用的各种position+float+display布局，把一个好端端的项目做完了，结果伴随而来的是一大堆的适配问题，后来再学长的建议下接触flex布局，才发现以前学css3错过了这么好的东西，追悔莫及，自己的demo图做的太大了，直接盗用w3c的图：。
废话不多说了，直接开始主题：
第一部分：flex布局基础
第二部分：flex布局与传统布局的对比
第三部分：flex实战（仿美团flex实战）
——————————————————————————————————————
第一部分：flex布局基础
——————————————————————————————————————
flex容器的属性：
1.flex-direction属性（属性决定了主轴上元素排列的方向）
值：
row（默认值）主轴为水平方向，起点在左轴
row-reverse: 主轴为水平方向，点在右端
column：主轴为垂直垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
图说：依次为 flex-direction：row || row-reverse || column || column-reverse的效果
2.flex-wrap属性：（默认情况下，项目都排在一条线上）
值：
nowrap：不换行（默认）
wrap：换行，且第一行在上方
warp-reverse：换行，且第一行在下方
图说：依次为 flex-wrap：nowrap || wrap || warp-reverse
3.flex-flow属性：（是flex-direction属性和flex-wrap属性的简写形式）
值：row nowrap （水平排列不换行）（默认）
column wrap（垂直排列换行）
4.justify-content 属性：（定义了元素在主轴上的对齐方式）
值：
flex-start：左对齐（默认值）
flex-end：右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around：每个项目之间的间隔相等。
5.align-items 属性：（align-item属性定义了项目在交叉轴上如何对齐）
值：
1.flex-start:交叉轴的起点对齐
2.flex-end：交叉轴的重点对齐
3.center：交叉轴的重点对齐
4.baseline:项目的第一行文字的基线对齐
5.stretch（默认值）：如果项目未设置高度或者设置为auto，，
6.align-content属性：( align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。)
值：
flex-strat： 交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴的中点对齐
pace-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
`flex元素的属性：
————————————————————————————————————————————————————————
1.order属性：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-grow属性：定义项目的放大比例，默认为0.如果存在剩余空间，也不放大
3.flex-shrink 属性： 定义了项目的缩小比例，默认为1，如果空间不足 项目将自己缩小。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
————————————————————————————————————————————————————————
第二部分：flex布局与传统布局的对比
————————————————————————————————————————————————————————
我这里列举两个最简单的flex布局的例子，让我们体会一下和传统布局的区别：
第一个：
垂直居中：传统布局写法：
.box{
position: relative;
width: 500px;
height: 500px;
border: 2px solid black;
}
.div{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)；
}
flex布局写法：
.box{
display: flex;
width: 500px;
height: 500px;
border: 2px solid black;
justify-content: center;
align-items: center;
}
.div{
width: 100px;
height: 100px;
background: red;
}
第二个：
flex写可以添加li的自动适应导航栏：
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.nav {
display: flex;
height: 60px;
font-size: 20px;
color: white;
text-align: center;
line-height: 60px;
background: #ccc;
}
.nav li {
flex: 1;
border: 1px solid black;
box-sizing: border-box;
}
.box{
position: fixed;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="nav">
<li>首页</li>
<li>物流</li>
<li>购物车</li>
<li>我的</li>
<li>系统</li>
</ul>
</div>
</body>
利用元素上的属性flex属性实现元素的自适应大小，当继续天机啊li之后依旧可以实现自适应相等的分割li板块，（淘宝的底部导航栏写法）
添加li标签：
还有好多益处我就不多解释了，可以完美实现王爷的适配，而不是一直去拿百分比改呀改改呀改，头大。
————————————————————————————————————————————————————————
第三部分：flex实战（仿美团flex实战）
————————————————————————————————————————————————————————
效果图如下：
html代码：
<!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">
<title>美团网</title>
<link rel="stylesheet" href="meituan.css">
<link rel="stylesheet" href="iconfont.css">
<link rel="stylesheet" href="iconfont2.css">
</head>
<body>
<header>
<div class="navbar">
<div class="navbar-left">
<span class="nav-city">广州<i class="icon-downarrow"></i></span>
</div>
<div class="nav-search">
<input type="text" placeholder="请输入商家名，品类或者商圈">
</div>
</div>
</header>
<main>
<div class="banner"><img src="images/download_banner.png" alt=""></div>
<nav class="navlist">
<ul>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont meishi" style="background: #fd9d21"></span>
<span class="nav-des">美食</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont dianying" style="background: #ff6727"></span>
<span class="nav-des">电影</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont jiudian" style="background: #4dc6ee"></span>
<span class="nav-des">酒店</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont xiuxianyule" style="background: #ff80c2"></span>
<span class="nav-des">休闲娱乐</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont waimai" style="background: #fd9d21"></span>
<span class="nav-des">外卖</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont ktv" style="background: #8090fa"></span>
<span class="nav-des">KTV</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont zhoubianyou" style="background: #fd9d21"></span>
<span class="nav-des">周边有</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont liren" style="background: #fed030"></span>
<span class="nav-des">丽人</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont xiaochikuaican" style="background: #ff80c2"></span>
<span class="nav-des">小吃快餐</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-href">
<span class="nav-icon iconfont quanbu" style="background: #00d3be"></span>
<span class="nav-des">全部分类</span>
</a>
</li>
</ul>
</nav>
<div class="pintuan boxWrapper">
<h4 class="title">附近拼团</h4>
<div class="box-list">
<div class="box-item">
<img src="images/food.jpg" alt="美食团">
<div class="item-title">牛小灶牛腩牛杂煲</div>
<div class="price">
<span class="strong">￥129</span>
<span class="line-price">￥158</span>
</div>
</div>
<div class="box-item">
<img src="images/ktv.jpg" alt="ktv">
<div class="item-title">KTV欢唱四小时苗斐自助餐</div>
<div class="price">
<span class="strong">￥75</span>
<span class="line-price">￥83</span>
</div>
</div>
</div>
</div>
<div class="guessLike">
<div class="title">- 猜你喜欢 -</div>
<ul class="list">
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5点通用]2人用餐，提供免费wifi</div>
<div class="price">
<span class="strong">129</span>
<span class="retail-price">门市价:158</span>
<span class="selNum">已售4000</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5点通用]2人用餐，提供免费wifi</div>
<div class="price">
<span class="strong">129</span>
<span class="retail-price">门市价158</span>
<span class="selNum">已售4000</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5点通用]2人用餐，提供免费wifi</div>
<div class="price">
<span class="strong">129</span>
<span class="retail-price">门市价158</span>
<span class="selNum">已售4000</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5点通用]2人用餐，提供免费wifi</div>
<div class="price">
<span class="strong">129</span>
<span class="retail-price">门市价158</span>
<span class="selNum">已售4000</span>
</div>
</div>
</div>
</a>
</li>
<li class="guessItem">
<a href="#" class="item-href">
<div class="item-box">
<div class="item-img">
<img src="images/food.jpg" alt="预览图">
</div>
<div class="item-des">
<div class="item-name">牛小灶牛腩牛杂煲</div>
<div class="item-title">[5点通用]2人用餐，提供免费wifi</div>
<div class="price">
<span class="strong">129</span>
<span class="retail-price">门市价158</span>
<span class="selNum">已售4000</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</main>
<footer>
<nav>
<ul class="nav-menu">
<li class="nav-item">
<a href="#">
<i class="iconfont2 iconshouye"></i>
<span>首页</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="iconfont2 iconicon_order"></i>
<span>订单</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="iconfont2 iconwode"></i>
<span>我的</span>
</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>
css代码：
*{
padding:0;
margin: 0;
}
body{
background: #f9f7f8;
padding: 45px 0 64px 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
/*顶部导航栏*/
header{
position: fixed;
top:0;
width: 100%;
margin-bottom: 5px;
}
.navbar{
display: flex;
background: #fff;
height: 40px;
color: black;
}
.navbar .navbar-left{
height: 40px;
line-height: 40px;
}
.navbar .nav-city{
font-size: 14px;
margin: 0 15px;
}
.icon-downarrow{
display: inline-block;
width: 6px;
height: 6px;
border-left:2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(-45deg);
margin:0 0 4px 6px;
}
.nav-search{
background: #f3f3f3;
height:30px;
line-height: 30px;
flex: 1;
border-radius:15px;
padding: 0 20px;
margin: 5px 15px 0 0;
font-size: 14px;
}
.nav-search input{
display: block;
width: 100%;
height: 100%;
background: transparent;
border: none;
outline:none;
}
/*广告图*/
.banner{
padding: 5px 10px;
background: #fff;
}
.banner img{
width: 100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/*导航菜单*/
.navlist{
background: #fff;
padding-top: 10px;
margin-bottom: 10px;
}
.navlist ul{
display: flex;
flex-wrap: wrap;
}
.navlist .nav-item{
flex: 0 0 20%;
text-align: center;
padding: 10px 0;
}
.nav-item .nav-icon{
display: block;
height:40px;
width: 40px;
border-radius: 50%;
/* background: #fd9d21; */
margin:0 auto 7px;
color:white;
font-size: 25px;
line-height: 40px;
}
.nav-item .nav-des{
color: #333;
}
/*拼团*/
.boxWrapper{
background: white;
padding: 10px;
}
.boxwrapper h4{
color: #333;
}
.box-list{
display: flex;
margin-top: 5px;
justify-content: space-between;
}
.box-list .box-item{
display: inline-block;
width: 49%;
text-align: center;
}
.box-item img{
width: 100%;
border-radius: 6px;
}
.box-item .item-title{
font-size: 14px;
padding: 0 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box-item .price .strong{
font-size: 18px;
color: #f63;
}
.box-item .price .line-price{
font-size: 12px;
text-decoration-line: line-through;
color: #666;
}
/*猜你喜欢*/
.guessLike{
background: white;
margin-top: 10px;
padding: 0 10px;
}
.guessLike .title{
text-align: center;
padding: 10px 0;
border-bottom: 1px solid #ddd8ce;
color: #666;
}
.guessLike .guessItem{
border-bottom: 1px solid #ddd8ce;
}
.guessLike .guessItem:last-child{
border: none;
}
.guessItem .itemhref{
padding: 15px 0;
display: block;
}
.guessItem .item-box{
display: flex;
padding: 10px;
}
.guessItem .item-img{
display: inline-block;
width: 90px;
height:90px;
}
.item-img img{
width: 100%;
height:100%;
}
.guessItem .item-des{
flex: 1;
margin-left: 10px;
}
.guessItem .item-name{
font-size: 18px;
color: #333;
margin-bottom: 2px;
}
.guessItem .item-title{
font-size: 15px;
color:#666;
margin-bottom: 6px;
}
.guessItem .price{
font-size: 14px;
color: #666;
position: relative;
}
.price .strong{
font-size: 22px;
color: #ff0000;
}
.guessItem .price .strong::before{
content:'\A5';
font-size: 14px;
color: #ff0000;
margin-right: 3px;
}
.guessItem .price .selNum{
position: absolute;
right:0;
top: 8px;
}
/*底部导航栏*/
footer{
position: fixed;
width: 100%;
bottom: 0;
background: white;
}
footer .nav-menu{
display: flex;
}
.nav-item{
flex:1;
text-align: center;
margin: 8px 0;
}
.nav-item a{
display: block;
color:#333;
}
.nav-item a:active{
color: #f63;
}
.nav-item .iconfont2{
display: block;
font-size: 24px;
}
.nav-item span{
font-size: 14px;
}
图片我办法打上去，图片用的阿里图标库，可以去iconfont自行下载。
希望自己以后多写一些网页，能尽快的掌握flex布局，切不可大意觉得css很简单，css真的是一个很奇妙的世界。
4477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
