此文已由作者张含会授权网易云社区发布。

欢迎访问网易云社区,了解更多网易技术产品运营经验。

关于盒模型布局

如何实现两栏布局?

(表格)
流式,
浮动,
定位

如何选择?

流式 > 浮动 > 定位

弹性盒模型FlexBox

  • 容器和项目 .box .item

  • 设置容器flex布局

      .box{      display: flex;        
      }

    // 行内元素

      .box{      display: inline-flex;  }
  • 容器属性

  1. flex-direction 容器内项目的排列方向(常用)

     .box {     flex-direction: row | row-reverse | column | column-reverse; }
  2. flex-wrap 容器内项目换行方式

     .box{     flex-wrap: nowrap | wrap | wrap-reverse; }
     注意:有些浏览器不支持
  3. flex-flow 是flex-direction和flex-wrap的简写属性

  1. justify-content 容器内项目的水平对其方式 (常用)

    .box {

     justify-content: flex-start | flex-end | center | space-between | space-around;

    }

  2. align-items 容器内项目的垂直对齐方式(常用)

     .box {     align-items: stretch | flex-start | flex-end | center | baseline ; }
  3. align-content 容器内项目的垂直对齐方式,多行生效,单行不生效

     .box {
         align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
     }

所以需要记住:    flex-direction,justify-content,align-items

  • 项目属性

  1. order 排列顺序,越小越靠前,默认为0,可以为负数

     .item{     order: <integer>; }
  2. flex-grow 扩张比例,默认为0

     .item{     flex-grow: <number>; }
  3. flex-shrink 收缩比例,默认为1

     .item{     flex-shrink: <number>; }
  4. flex-basis 分配多余空间前占据的空间

     .item {     flex-basis: auto | <length>; /* default auto */
     }
  5. flex 是    flex-grow,flex-shrink,flex-basis 的简写

     .item {     flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{     flex: 1; }
  6. align-self 项目的对齐方式,覆盖容器align-items的值

     .item {     align-self: auto | flex-start | flex-end | center | baseline | stretch; }

项目属性要记住flex

flex-grow 和 flex-shrink如何计算?

flex-grow

对于剩余空间,按照一定的比例分配到项目,以下例子的分配过程如下:

  1. 先计算剩余空间1000-200-400-200=200

  2. 剩余空间被分成4份,item1占2/4,item2占1/4,item3占1/4

  3. item1共占200+200x2/4=300,item2共占400+200x1/4=450,item3共占200+200x1/4=250

    <div class="box">
        <div class="item">100</div>
        <div class="item">200</div>
        <div class="item">300</div>
    </div>     .box {
        display: flex;
        width: 1000px;
        height: 300px;
    }
    .item{
        height: 50px;
    }
    .item:first-child{
        flex: 200px 2 1;
    }
    .item:nth-child(2){
        flex: 400px 1 2;
    }
    .item:nth-child(3){
        flex: 200px 1 1;
    }

flex-shrink

对于溢出空间,按照一定的比例收缩到项目,以下例子的分配过程如下:

  1. 计算溢出空间200+400+200-400=400

  2. 注意flex-shrink是收缩比例, 是基于项目宽度的,加入item1的宽度需要收缩n的比例能满足条件,根据设置item2应该收缩2n,item2的收缩比例是n,200xn+400x2n+200xn=400,所以n=1/3(0.33)

  3. item1所占的宽度为200x(1-0.33)=133.33,item2所占宽度为400x(1-2x0.33)=133.33,item3所占空间为200x(1-0.33)=133.33

注意:

如果设置item1的收缩比是1,item2的收缩比是100,item3的收缩比是1,根据公式计算收缩比例是1/1001,item2所占空间为400x(1-100x(1/1001)),约等于0,很明显,如果是0,项目内容是没办法显示的,所以项目的空间不会全部收缩,肯定会预留下项目内容所需要的最小空间,这时候的计算方式会发生变化,假设item2内容所占最小空间为20,所以item2只能收缩掉400-20=380,剩余20按比例收缩在item1和item3。

    <div class="box">
        <div class="item">100</div>
        <div class="item">200</div>
        <div class="item">300</div>
    </div>
    .box {        display: flex;        width: 400px;        height: 300px;
        box-sizing: border-box;        background: #0f0;
        justify-content: space-around;
    }
    .item{
      box-sizing: border-box;      height: 50px;  
      background: #f00;      color: #fff;
      line-height: 50px;
    }
    .item:first-child{      flex: 200px 1 1;
    }
    .item:nth-child(2){      flex: 400px 1 2;
    }
    .item:nth-child(3){      flex: 200px 1 1;
    }

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击

相关文章:
【推荐】 JVM运行内存分配和回收
【推荐】 Kylin存储和查询的分片问题

flex布局之flex-grow和flex-shrink如何计算的更多相关文章

  1. flex布局全解析

    前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...

  2. Flex 布局知识点梳理

    传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 ...

  3. CSS之Flex 布局

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  4. 前端flex布局学习笔记

    flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...

  5. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

  6. Flex布局在小程序的使用

    一篇旧文,上手小程序时做的一些探索 Flex布局是一种十分灵活方便的布局方式,目前主流的现代浏览器基本都实现了对Flex布局的完全支持.而在微信小程序中,IOS端使用的渲染引擎WKWebView和安卓 ...

  7. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  8. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  9. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  10. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

随机推荐

  1. iOS核心动画高级技巧之核心动画(三)

    iOS核心动画高级技巧之CALayer(一) iOS核心动画高级技巧之图层变换和专用图层(二)iOS核心动画高级技巧之核心动画(三)iOS核心动画高级技巧之性能(四)iOS核心动画高级技巧之动画总结( ...

  2. centOS7虚拟机和本机ping通

    1.配置centOS虚拟机网卡 先设置桥接模式 此处的address要和本机的vmware在同一个网段 2.重启centOS网卡 3.关闭本机和虚拟机防火墙,防止ping不通 centOS命令: fi ...

  3. Node.js | 你的物联网系统,有个管家待认领

    很多时候,专业的事情都要交给专业的人来做,才会更放心. 例如买了套房,交房装修完毕,欢天喜地入住后,房子的日常养护和维护之类的事情,都由谁来负责呢? 物业呗~买了房子就自然需要房子所在小区提供的物业服 ...

  4. C# DateTime的时区

    C#中可以通过DateTime的Kind属性指定DateTime的时区 DateTimeKind有3个枚举值: Unspecified:未指定为UTC时间或本地时间 Utc: UTC时间 Local: ...

  5. Winform调整DEV控件高度

  6. Yii2 widgets [mztest/yii2-widget-file-upload]

    Enjoy it. A widget for uploading files to your server. Github , Packagist Screenshots

  7. linux下如何实现mysql数据库定时自动备份

    概述   备份是容灾的基础,是指为防止系统出现操作失误或系统故障导致数据丢失,而将全部或部分数据集合从应用主机的硬盘或阵列复制到其它的存储介质的过程.而对于一些网站.系统来说,数据库就是一切,所以做好 ...

  8. python redis基本操作

    #!/usr/bin/env python #-*- coding:utf-8 -*- # author:leo # datetime:2019/4/24 16:26 # software: PyCh ...

  9. Cobbler自动安装的Linux系统ssh无法进入

    Linux ssh登陆老提示“permission denied,please try again” ,但是iptables已经关掉了 修改/etc/ssh/sshd_config文件.找如下的一句 ...

  10. webpack4.x ,1基本项目构建 详解

    1.先创建个文件夹 比如叫 webApp 用编译器打开 2.安装全局的webpack 和webpack-cli 及 webpack-dev-server 命令如下 npm install webpac ...