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

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

关于盒模型布局

如何实现两栏布局?

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

如何选择?

流式 > 浮动 > 定位

弹性盒模型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. h5新增属性本地存储

    ---恢复内容开始--- 存储的两种类型: localStorage 和 sessionStorage localstorage:没有时间限制的数据存储 sessionStorage  针对一个ses ...

  2. 解决IE下面诡异地使用quickrIE5模式打开页面的有关问题

    解决IE下面诡异地使用quickrIE5模式打开页面的有关问题 <!doctype html public "-//w3c//dtd html 4.01 transitional//e ...

  3. String和string

    String和string的区别 从位置讲:         1.String是.NET   Framework里面的String,小写的string是C#语言中的string 2.如果把using ...

  4. int _tmain(int argc, _TCHAR* argv[])

    int _tmain(int argc, _TCHAR* argv[]){ int i; for (i = 0; i<argc; i++) cout<<argv[i]<< ...

  5. 第六十三课、C语言的异常处理

    http://www.cnblogs.com/gui-lin/p/6379101.html 一.异常处理 1.异常的概念 (1).程序在运行过程中可能产生异常 (2).异常(Exception)和Bu ...

  6. Angular4中常用管道

    通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道. 一.大小写转换管道 uppercase将字符串转换为大写 lowercase将字符串转换为小 ...

  7. Drupal相关网站推荐

    http://nodeone.se/ drupal7安装过程中,如果选择简体中文,到导入翻译时出现错误,原因是执行超时了. 方法一: 修改php.ini文件:memory_limit = 256M ( ...

  8. Scanner和 Random类,控制语句的例题,商品管理(直接赋值)

    Scanner类的使用: import java.util.Scanner; class Demo02 { public static void main(String[] args) { //1.导 ...

  9. 关于HTML(含HTML5)的块级元素和行级(内联)元素总结

    1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...

  10. CSS清除浮动方法总结

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...