原创首发

利用Flex布局实现领卷联盟

aiwenbin 发表于 2020-09-04 04:46 2551

利用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代码, 所以应该不算将康师傅的代码透露出去吧 ^--^)

本文由 aiwenbin 原创发布于阳光沙滩，未经作者授权，禁止转载

0/240

拉大锯

用flex的话，注意一下兼容性。就看看你要兼容到哪里了。不管IE浏览器的话，想怎么用怎么用。

2020-09-03 22:26 回复
1153952789488054272
- A lonely cat 回复 @拉大锯
  
  IE他爹都不管他了哈哈哈
  
  2020-09-05 21:19 回复 1204736502274318336
- 拉大锯回复 @A lonely cat
  
  这话牛逼，哈哈！
  
  2020-09-05 21:21 回复 1153952789488054272
0/256