flex布局实例讲解，兄弟看flex布局案例 这一篇就够了！！
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、flex布局是什么？
- 二、flex 案例需求分析
-
- （1）初始样式：
- （2）需求分析：
-
- （1）需要整体布局为居中
- （2）左侧边导航栏随着鼠标的进入改变背景颜色和字体颜色
- （3）右侧边链接图片可以随着屏幕的大小自适应换行
- （4）底部同样自适应并居中
- （5）最终样式
- （3）案例讲解
-
- （1）实现基础分块
-
- header
- main
- footer
- （4）最终代码
- 欢迎小伙伴们留言讨论 当然也欢迎大佬改正错误 哈哈哈哈
前言
提示：主要内容 flex弹性布局以及css：
随着各式各样的移动端web端的出现，自适应屏幕大小就显得格外重要，flex布局就可以很好的解决这一类问题。
提示：以下是本篇文章正文内容
一、flex布局是什么？
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。
不了解的小伙伴可以点击 flex布局详细解说 了解更多
二、flex 案例需求分析
（1）初始样式：
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>爱V猫友情链接title>
head>
<body>
<header>
<h1 class="headLeft">
<a href="#"><img src="images/logo.jpg" alt="" />a>
h1>
<div class="headRight">
<a href="#">登录a>
<a href="#" class="active">注册a>
div>
header>
<section class="wrap">
<div class="mian">
<ul class="mianLeft">
<li><a href="#">公司介绍a>li>
<li><a href="#">新闻动态a>li>
<li><a href="#">联系我们a>li>
<li><a href="#">招才纳士a>li>
<li><a href="#">用户协议a>li>
<li><a href="#">常见问题a>li>
<li><a href="#">合作伙伴a>li>
<li><a href="#">友情链接a>li>
<li><a href="#">网站地图a>li>
<li><a href="#">付费协议a>li>
<li><a href="#">使用说明a>li>
ul>
<section class="mianRight">
<h2>友情链接h2>
<ul class="picList">
<li>
<a href="#"><img src="images/lk_logo01.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo02.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo03.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo04.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo05.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo06.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo07.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo08.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo09.jpg" alt="" />a>
li>
ul>
section>
div>
section>
<footer>
<ul>
<li><a href="#">公司介绍a>li>
<li><a href="#">新闻动态a>li>
<li><a href="#">联系我们a>li>
<li><a href="#">招商加盟a>li>
<li><a href="#">招商用户a>li>
<li><a href="#">协议合作伙伴a>li>
<li><a href="#">常见问题Appa>li>
<li><a href="#">下载网站地图a>li>
ul>
<p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号p>
<p>Coppyright © 2018 iVmall All Rights Reservedp>
footer>
body>
html>
（2）需求分析：
（1）需要整体布局为居中
（2）左侧边导航栏随着鼠标的进入改变背景颜色和字体颜色
（3）右侧边链接图片可以随着屏幕的大小自适应换行
（4）底部同样自适应并居中
（5）最终样式
（3）案例讲解
（1）实现基础分块
（1）通过最终所要达到的效果图可以将其大致分为 header（头部块）main（内容块也叫主块，怎么好听怎么来）footer （底部块）竖向排列
header
（1）各个击破，先从 header 入手我们可以很清楚地知道 header 大致分为2个部分 一个是logo的展示，另一个是 登录注册 的操作链接，横向排列，居中布局
（2）代码示例（css）
header {
/*设置header为弹性布局盒子（父）*/
display: flex;
/*盒子内块级元素排列方式为 space-around
均匀排列每个元素每个元素周围分配相同的空间 */
justify-content: space-around;
/* 属性为弹性容器内的项目指定默认对齐方式，这里为center*/
align-items: center;
}
如果小伙伴们对flex属性不熟悉的话可以点击 flex属性详解 了解更多。
main
（1）main 是整体居中；因此我们需要给main一个宽度（这里推荐使用百分比），然后通过 flex的justify-content:center 设置整体居中布局。
/*.wrap 为.main 的父盒子*/
.wrap {
/*设置盒子为弹性布局 flex*/
display: flex;
/*设置盒子内子元素整体 居中*/
justify-content: center;
/*给定一个背景颜色*/
background-color: aqua;
}
（2） mian 我们同样可以很清楚地知道 main 大致分为2个部分 一个是侧边栏（mianLeft）的展示，另一个是 ** 友情链接图片（mianRight），整体横向排列，居中布局**；但是我们仔细看可以知道，
1：mianLeft 中是占整体父元素的1/3竖向排列 并且 li 和 a 标签的原生样式是没有的。
.mian .mianLeft {
/*flex:1表示将父元素整体作为单位一 占这个单位一的 1/单位一*/
flex: 1;
text-align: center;
background-color: rgb(239, 239, 239);
padding-top: 40px;
}
.mian .mianLeft li {
height: 30px;
font-size: 18px;
/*设置字体竖向排列居中 这里的 30px 和 父盒子的高度保持一致*/
line-height: 30px;
/*去掉 li 默认样式*/
list-style-type: none;
}
/*选择鼠标指针浮动在其上的元素，并设置其样式：*/
/*提示：:hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。*/
.mian .mianLeft li:hover {
/*鼠标指针移动到元素上面后 background-color ：red*/
background-color: red;
color: #fff;
}
.mian .mianLeft li a:hover {
/*同上*/
color: #fff;
}
a {
text-decoration: none; /*去除a的下划线*/
color: rgb(89, 89, 89);
}
更多伪类可以点击 :hover详解
2：mianRight 中的图片链接是可以换行的 并且整体居中排列
.mian .mianRight {
/*占整体父元素单位一的3份 3/单位一*/
/*同上 的 .mainLeft -> flex:1 可以知道整个单位一被平分为4分 mainLeft 占1份 mainRight 占3份*/
flex: 3;
background-color: #fff;
}
/*基础样式不做解析*/
.mian .mianRight h2 {
border-bottom: 1px rgb(164, 164, 164) solid;
font-size: 40px;
color: rgb(164, 164, 164);
padding: 20px 0 20px 20px;
}
.mian .mianRight .picList {
display: flex;
width: 100%;
/* justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。*/
justify-content: space-evenly;
/*当父元素宽度不够容纳一行子元素的时候 自动换行*/
flex-wrap: wrap;
}
.mian .mianRight .picList li {
/*去掉 li 默认样式*/
list-style-type: none;
/*margin的简写*/
/*margin: top right buttom left*/
margin: 10px 0 10px 0;
}
.mian .mianRight .picList li img {
width: 200px;
}
如果小伙伴们对flex属性不熟悉的话可以点击 flex属性详解 了解更多。
footer
（1）footer 就是最简单的这里我们直接给出代码相信小伙伴们都能看懂
（2）代码示例（css）
footer {
/*字体居中*/
text-align: center;
}
footer ul {
display: flex;
justify-content: center;
}
footer ul li {
margin: 5px;
}
（4）最终代码
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>爱V猫友情链接title>
head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
header {
display: flex;
justify-content: space-around;
align-items: center;
}
.wrap {
display: flex;
justify-content: center;
background-color: aqua;
}
.wrap .mian {
display: flex;
width: 70%;
margin: 10px 0 10px 0;
}
.mian .mianLeft {
flex: 1;
text-align: center;
background-color: rgb(239, 239, 239);
padding-top: 40px;
}
.mian .mianLeft li {
height: 30px;
font-size: 18px;
line-height: 30px;
list-style-type: none;
}
.mian .mianLeft li:hover {
background-color: red;
color: #fff;
}
.mian .mianLeft li a:hover {
color: #fff;
}
a {
text-decoration: none;
color: rgb(89, 89, 89);
}
.mian .mianRight {
flex: 3;
background-color: #fff;
}
.mian .mianRight h2 {
border-bottom: 1px rgb(164, 164, 164) solid;
font-size: 40px;
color: rgb(164, 164, 164);
padding: 20px 0 20px 20px;
}
.mian .mianRight .picList {
display: flex;
width: 100%;
justify-content: space-evenly;
flex-wrap: wrap;
}
.mian .mianRight .picList li {
list-style-type: none;
margin: 10px 0 10px 0;
}
.mian .mianRight .picList li img {
width: 200px;
}
footer {
text-align: center;
}
footer ul {
display: flex;
justify-content: center;
}
footer ul li {
margin: 5px;
}
style>
<body>
<header>
<h1 class="headLeft">
<a href="#"><img src="images/logo.jpg" alt="" />a>
h1>
<div class="headRight">
<a href="#">登录a>
<a href="#" class="active">注册a>
div>
header>
<section class="wrap">
<div class="mian">
<ul class="mianLeft">
<li><a href="#">公司介绍a>li>
<li><a href="#">新闻动态a>li>
<li><a href="#">联系我们a>li>
<li><a href="#">招才纳士a>li>
<li><a href="#">用户协议a>li>
<li><a href="#">常见问题a>li>
<li><a href="#">合作伙伴a>li>
<li><a href="#">友情链接a>li>
<li><a href="#">网站地图a>li>
<li><a href="#">付费协议a>li>
<li><a href="#">使用说明a>li>
ul>
<section class="mianRight">
<h2>友情链接h2>
<ul class="picList">
<li>
<a href="#"><img src="images/lk_logo01.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo02.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo03.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo04.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo05.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo06.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo07.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo08.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/lk_logo09.jpg" alt="" />a>
li>
ul>
section>
div>
section>
<footer>
<ul>
<li><a href="#">公司介绍a>li>
<li><a href="#">新闻动态a>li>
<li><a href="#">联系我们a>li>
<li><a href="#">招商加盟a>li>
<li><a href="#">招商用户a>li>
<li><a href="#">协议合作伙伴a>li>
<li><a href="#">常见问题Appa>li>
<li><a href="#">下载网站地图a>li>
ul>
<p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号p>
<p>Coppyright © 2018 iVmall All Rights Reservedp>
footer>
body>
html>