重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32959 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

CSS Flex排版:为什么垂直居中这么难?

winter 2019-04-13
你好,我是 winter。今天我们来谈谈 Flex 排版。
我们在前面多次讲过,正常流排版的设计来源于数百年来出版行业的排版经验,而 HTML 诞生之初,也确实是作为一种“超文本”存在的。
但是,自上世纪 90 年代以来,Web 标准和各种 Web 应用蓬勃发展,网页的功能逐渐从“文本信息”向着“软件功能”过渡,这个思路的变化导致了:CSS 的正常流逐渐不满足人民群众的需求了。
这是因为文字排版的思路是“改变文字和盒的相对位置,把它放进特定的版面中”,而软件界面的思路则是“改变盒的大小,使得它们的结构保持固定”。
因此,在早年的 CSS 中,“使盒按照外部尺寸变化”的能力非常弱。在我入行前端的时间(大约 2006 年),CSS 三大经典问题:垂直居中问题,两列等高问题,自适应宽问题。这是在其它 UI 系统中最为基本的问题,而到了 CSS 中,却变成了困扰工程师的三座大山。
机智的前端开发者们,曾经创造了各种黑科技来解决问题,包括著名的 table 布局、负 margin、float 与 clear 等等。在这种情况下,Flex 布局被随着 CSS3 一起提出(最初叫 box 布局),可以说是解决了大问题。
React Native 则更为大胆地使用了纯粹的 Flex 排版,不再支持正常流,最终也很好地支持了大量的应用界面布局,这一点也证明了 Flex 排版的潜力。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(9)

  • 许童童
    flex好用,gird更好用。会讲一下吗?
    2019-04-13
    1
    8
  • 阿成
    https://gist.github.com/aimergenge/e26193440fa38ebbb9a54847540c29c7
    2019-04-15
    4
  • KingSwim
    希望可以图文并茂一些
    2019-08-14
    3
  • cjd
    直接calc(100% - n)
    2019-04-15
    3
  • favorlm
    自动填充剩余宽度
    <!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>
        <style>
          .box {
            position: absolute;
            width: 300px;
            height: 100px;
            background-color: cyan;
          }
          .childbox1Attr {
            position: absolute;
            background-color: bisque;
            width: 35px;
            height: 35px;
          }
          .childbox2Attr {
            position: absolute;
            background-color: beige;
            width: 35px;
            height: 35px;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="childbox1Attr"></div>
          <div class="childbox2Attr"></div>
        </div>
        <script>
            
                const childbox1Attr = {
                    width: '100'
                };
                const childbox2Attr = {
                    width: '100',
                    flex: '1'
                };
                const box = document.getElementsByClassName('box')[0];
                const childbox1Ele = document.getElementsByClassName('childbox1Attr')[0];
                const childbox2Ele = document.getElementsByClassName('childbox2Attr')[0];
                const boxcomputedStyle = window.getComputedStyle(box, null);
                const child1ComputedStyle = window.getComputedStyle(childbox1Ele, null);
                childbox1Ele.style.width = childbox1Attr.width+'px';
                if(childbox2Attr.flex !== null || childbox2Attr.flex!==''){
                    if(childbox2Attr.flex === '1'){
                        // 利用一下不安全特性,实在不知道怎么写
                        const childbox2EleWidth = boxcomputedStyle["width"].substring(0,3) - child1ComputedStyle["width"].substring(0,3);
                        childbox2Ele.style.width = childbox2EleWidth + 'px';
                        childbox2Ele.style.left = child1ComputedStyle["width"]
                    }
                }
            
            </script>
      </body>
    </html>
    2019-04-14
    3
  • 北拉
    试过好多次,找了很多方法flex兼容ie9以下,每次都失败,有什么好的解决办法吗
    2019-04-14
    3
  • 靠人品去赢
    flex是我刚开始做小程序,学到的第一个东西,真的好用,结合一些别的属性能解决很多兼容问题,而不再出现一机一况的情况,但是有的的时候,在做安卓和苹果的时候还是会遇到兼容性问题,能不能讲一下安卓和苹果的一些不同,比如在一个安卓上正常,在苹果上会出现边框被吃掉一部分的情况。

    作者回复: 兼容问题怎么可能有一下子解决的方法呢,我也是case by case去看的啊

    2019-06-19
    2
  • 彧豪
    gird布局如果后面winter老师没有讲到,推荐你找找大漠老师的文章来看看,另外阮一峰老师也写了一篇,二者可以结合起来看看
    2019-04-13
    2
  • 渴望做梦
    老师,为何最后一个宽度自适应的例子用 flex: 1 呢,flex: 1 表示什么含义呢?

    作者回复: 这就是基本的flex用法。

    2019-08-02
    2
收起评论
9
返回
顶部