flexbox 布局入门


flexbox 布局入门

场景

最近刚看了 flexbox,之前一直用的 UI 框架写前端,吾辈可能是个假的前端开发(好吧,其实之前吾辈前后端都写,写得最多的是 JS/TS 就是了),所以写一篇记录便于复习知识。

简介

不谈需求讲功能就是扯淡,所以吾辈先来说一下吾辈使用 flex 的主要场景吧

  • 水平布局: 导航栏,多栏展示,媒体元素
  • 水平垂直居中: 这在 flex 之前使用 CSS 很难实现
  • 避免使用浮动,行内块元素,表格进行布局

使用

水平布局

使用 flex 可以轻而易举地实现栅格系统,这里的最下面还实现了一个常见的侧边菜单两栏布局。

栅格系统

实现代码

<!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>flex 水平布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* #region 12 栅格布局 */

      .row {
        display: flex;
      }
      .col {
        flex: 1;
      }
      .col-1 {
        flex: 1;
      }
      .col-2 {
        flex: 2;
      }
      .col-3 {
        flex: 3;
      }
      .col-4 {
        flex: 4;
      }
      .col-5 {
        flex: 5;
      }
      .col-6 {
        flex: 6;
      }
      .col-7 {
        flex: 7;
      }
      .col-8 {
        flex: 8;
      }
      .col-9 {
        flex: 9;
      }
      .col-10 {
        flex: 10;
      }
      .col-11 {
        flex: 11;
      }
      .col-12 {
        flex: 12;
      }

      /* #endregion */

      .col {
        min-width: 50px;
        background-color: #00ffff;
        border: solid 2px #ffffff;
        text-align: center;
      }

      .side-menu {
        max-width: 250px;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
      <div class="col col-1">col-1</div>
    </div>
    <div class="row">
      <div class="col col-2">col-2</div>
      <div class="col col-2">col-2</div>
      <div class="col col-2">col-2</div>
      <div class="col col-2">col-2</div>
      <div class="col col-2">col-2</div>
      <div class="col col-2">col-2</div>
    </div>
    <div class="row">
      <div class="col col-3">col-3</div>
      <div class="col col-3">col-3</div>
      <div class="col col-3">col-3</div>
      <div class="col col-3">col-3</div>
    </div>
    <div class="row">
      <div class="col col-4">col-4</div>
      <div class="col col-4">col-4</div>
      <div class="col col-4">col-4</div>
    </div>
    <div class="row">
      <div class="col col-6">col-6</div>
      <div class="col col-6">col-6</div>
    </div>
    <div class="row">
      <div class="col col-12">col-12</div>
    </div>
    <div class="row">
      <!-- 侧边菜单栏 -->
      <div class="col col-3 side-menu">col-3</div>
      <div class="col col-9">col-9</div>
    </div>
  </body>
</html>

水平垂直居中

在此 flex 出现之前,想要盒子水平垂直居中是一件比较困难的一件事,但至此之后,便再也不足为道了。

水平垂直居中

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 flex 实现水平垂直居中</title>
    <style>
      html,
      body,
      .flex-container {
        height: 100%;
      }

      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2c3e50;
      }

      .flex-item {
        width: 40rem;

        background-color: #ffffff;
        padding: 2rem;
        box-shadow: 0 0 0.5rem #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">
        <h2>内境逾宽、外延逾窄</h2>
        <p>
          我和麻省理工学院的一些博士生谈论过各种浏览器的好坏,他们不和你谈微软的
          IE 或者 Mozilla 的火狐,而是 Unix 用户更常用的字处理器 Emacs
          下一个很小的浏览网页的功能,这个东西不仅不好用,而且在全世界用它的网民连万分之一都不到。他们和你谈的是里面技术上谁实现的好。这些人以后可以是很好的科学家和工程师,但是很难创业。
        </p>
      </div>
    </div>
  </body>
</html>

对比浮动、行内盒子、表格布局

  • 浮动布局: 浏览器很早就实现的一种布局方式,但浮动之后的元素脱离了标准文档流,必须特别注意清除浮动。并且,浮动也无法提供足够的布局能力,常常需要一些 hack 技巧。最后,浮动布局本身也不是为了布局而设计,浮动最适合的场景莫过于实现媒体元素的文字环绕。
  • 行内盒子: 基本没有提供布局能力
  • 表格布局: 实现的非常早的二维布局方式,在 Web 早期很多网站喜欢使用它进行布局,正是因为它的二维布局可以简单实现一些常规布局。但终究它的布局能力还是不足的,CSS3 中实现了更好的 Grid Layout 作为二维布局方式。
  • Grid Layout: 理论上来说,能够进行二维布局的 Grid 肯定比只能一维布局的 Flex 更适合整体布局,但现实因素往往使之并不能理想化。就目前而言,Grid 的实现并不完整,当然,最新版的 Chrome/Firefox 肯定是可以的了,但 Safari/Edge 肯定还是有坑的!

下面实现一个标签列表,以此便可以看出 Flex 的强大功用

标签列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 flex 实现标签组</title>
    <style>
      .tags {
        border: 1px solid #c9e1f4;
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
        /*min-height: 500px;*/
        /*align-content: space-around;*/
      }

      .tags li {
        display: inline-block;
        margin: 0.5rem;
        flex: 1 0 auto;
        max-width: 10rem;
      }

      .tags li a {
        position: relative;
        display: block;
        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
        background-color: #c9e1f4;
        color: #28448f;
        border-radius: 0 0.25rem 0.25rem 0;
        line-height: 1.5;
        text-decoration: none;
        text-align: center;
      }

      .tags li a::before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border: 1rem solid transparent;
        border-right-width: 0.5rem;
        border-right-color: #c9e1f4;
        left: -1.5rem;
        top: 0;
      }
    </style>
  </head>
  <body>
    <ul class="tags">
      <li><a href="#">Android</a></li>
      <li><a href="#">Chrome</a></li>
      <li><a href="#">Cmder</a></li>
      <li><a href="#">DB</a></li>
      <li><a href="#">FTP</a></li>
      <li><a href="#">FreeNetwork</a></li>
      <li><a href="#">Git</a></li>
      <li><a href="#">Gradle</a></li>
      <li><a href="#">Greasemonkey</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">IDEA</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">Linux</a></li>
      <li><a href="#">Markdown</a></li>
      <li><a href="#">Maven</a></li>
      <li><a href="#">MongoDB</a></li>
      <li><a href="#">MonngoDB</a></li>
      <li><a href="#">MySQL</a></li>
      <li><a href="#">Mybatis</a></li>
      <li><a href="#">NodeJS</a></li>
      <li><a href="#">Prettier</a></li>
      <li><a href="#">Promise</a></li>
      <li><a href="#">React</a></li>
      <li><a href="#">Spring</a></li>
      <li><a href="#">Tool</a></li>
      <li><a href="#">TypeScript</a></li>
      <li><a href="#">VSCode</a></li>
      <li><a href="#">VueJS</a></li>
      <li><a href="#">Vuetify</a></li>
      <li><a href="#">Web</a></li>
      <li><a href="#">Windows</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">jsdoc</a></li>
      <li><a href="#">mobile</a></li>
      <li><a href="#">npm</a></li>
      <li><a href="#">yarn</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>
  </body>
</html>

文章作者: rxliuli
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 rxliuli !
 上一篇
前端使用工具强制实行代码规范(Vue) 前端使用工具强制实行代码规范(Vue)
前端使用工具强制实行代码规范(Vue)场景 GitHub Demo 非强制性的规范都不会成为真正的规范。在之前,我们也会在团队内编写一些开发规范文档,却总是不能真正有效的执行下去,原因何在? 其一,人是健忘的,就算真正看完了规范文档,也
2019-09-23 rxliuli
下一篇 
论国内的通货膨胀率 论国内的通货膨胀率
论国内的通货膨胀率前言偶然在知乎上面看到的一个长篇评论,对国内的通货膨胀讲解的有理有据,便于此转载一下,供人参考。 原文地址: https://www.zhihu.com/question/21470072 正文小猫猫 最近有三个信息正
2019-09-06 rxliuli
  目录