利用Flex布局实现领卷联盟
最近观看康师傅的领卷联盟的前端视频, 发现康师傅大部分使用的是浮动来进行布局, 然后利用浮动需要考虑的因素太多, 视频里面也经常对Css的代码进行修改, 为了减小布局的复杂性, 自己尝试的使用Flex布局对领卷联盟进行实现, 整体来讲, 实现的效果比较好, 同时开发效率也比较高, 可修改性也更高.
Flex布局的基本用法
学习Flex布局, 只需要掌握两个基本的概念, 一个是Flex容器, 另一个是Flex子项(item)
-
Flex容器 将一个容器设置为Flex容器
display: flex;
Flex容器可以通过下面的属性对子元素的布局进行设置flex-direction: column | row
flex-wrap: nowrap | wrap
...其他不常用的可以在需要使用的时候百度或者查找官方文档
-
Flex子项(item) 当一个元素的父元素为Flex容器是, 该元素便是Flex子项 Flex子项可以使用
flex: 数字
实现Flex子项占容器的大小 -
利用Flex实现一个响应式的导航栏 导航栏是做网页中最常见的需求之一, 如果使用传统布局中的浮动, 不仅需要清除浮动, 还不能做到响应不同尺寸大小的屏幕. 而Flex布局便可比较轻松的实现. 主要思路: a.将header-container设置为flex容器, 动态设置header-logo和header-content占container容器的大小 b. 将.header-logo 和.header-content 设置为flex容器, 通过flex对logo和content里面的内容进行布局
整体效果
css代码
<style> *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } .center-box { max-width: 1140px; margin: 0 auto; } .header-container { display: flex; height: 70px; border-bottom: 1px solid lightgray; justify-content: center; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3) } .header-logo { font-size: 24px; font-weight: 600; color: #c9302c; } .header-title { font-size: 20px; font-weight: 600; color: #000; letter-spacing: 10px; } .header-logo-container { flex: 1; display: flex; line-height: 50px; {#border: 1px solid yellow;#} height: 50px; } .header-title-container { flex: 2; display: flex; line-height: 50px; {#border: 1px solid blue;#} height: 50px; } .aside-container { margin-top: 20px; } .aside-container ul { list-style: none; color: #000000; } .active-menu { background: #ff4500; } .aside-container .nav-list { width: 100px; height: 200px; border: 1px solid lightgray; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); display: flex; flex-direction: column; } .aside-container .nav-list .nav-list-title { flex: 3; display: flex; align-items: center; justify-content: center; } .aside-container .nav-list ul { flex: 8; display: flex; flex-direction: column; cursor: pointer; } .aside-container .nav-list ul li { flex: 1; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid lightgray; } .content-container { display: flex; } .main { margin-top: 20px; margin-left: 20px; border: 1px solid blue; } a { text-decoration: none; } </style>
所有代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } .center-box { max-width: 1140px; margin: 0 auto; } .header-container { display: flex; height: 70px; border-bottom: 1px solid lightgray; justify-content: center; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3) } .header-logo { font-size: 24px; font-weight: 600; color: #c9302c; } .header-title { font-size: 20px; font-weight: 600; color: #000; letter-spacing: 10px; } .header-logo-container { flex: 1; display: flex; line-height: 50px; {#border: 1px solid yellow;#} height: 50px; } .header-title-container { flex: 2; display: flex; line-height: 50px; {#border: 1px solid blue;#} height: 50px; } .aside-container { margin-top: 20px; } .aside-container ul { list-style: none; color: #000000; } .active-menu { background: #ff4500; } .aside-container .nav-list { width: 100px; height: 200px; border: 1px solid lightgray; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); display: flex; flex-direction: column; } .aside-container .nav-list .nav-list-title { flex: 3; display: flex; align-items: center; justify-content: center; } .aside-container .nav-list ul { flex: 8; display: flex; flex-direction: column; cursor: pointer; } .aside-container .nav-list ul li { flex: 1; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid lightgray; } .content-container { display: flex; } .main { margin-top: 20px; margin-left: 20px; border: 1px solid blue; } a { text-decoration: none; } </style> </head> <body> <div class="header"> <div class="center-box"> <div class="header-container"> <div class="header-logo-container"> <div class="header-logo">Logo</div> </div> <div class="header-title-container"> <div class="header-title">民航知识问答与推荐系统</div> </div> </div> <div class="nav-container"> <div class="nav-list"> </div> </div> </div> </div> <div class="content"> <div class="center-box"> <div class="content-container"> <div class="aside"> <div class="aside-container"> <div class="nav-list"> <div class="nav-list-title active-menu">导航栏</div> <ul> <li><a href="{{ url_for('entitySearch') }}">实体查询</a></li> <li><a href="{{ url_for('relationSearch') }}">关系查询</a></li> <li><a href="{{ url_for('questionSearch')}}">知识问答</a></li> </ul> </div> </div> </div> <div class="main"> <div class="main-container"> </div> </div> </div> </div> </div> <div class="footer"> <div class="footer-container"> <div class="footer-link"></div> <div class="footer-info"></div> </div> </div> </body> </html>
利用Flex布局实现领卷联盟的发现页
代码过长, 可以访问我的github 获取完整的代码(备注: 只有Css和Html 代码, 没有相关的Js代码, 所以应该不算将康师傅的代码透露出去吧 ^--^)