这篇文章对flex不熟也可以看。这篇文章只讲这三个属性。为了简单化,不会提到主轴交叉轴,也不讲方向,默认方向就是水平方向从左往右。但并不影响对这三个概念的理解。

如果你觉得对flex比较了解,可以直接从第二小节开始看起。

1.开启flex

我们正常写三个div。默认情况下是垂直排列的。只要开启flex,一行代码就可以实现水平布局。这是flex最有用的一点。

<div id="box"><div class="div1 fontCenter">1</div><div class="div2 fontCenter">2</div><div class="div3 fontCenter">3</div>
</div>
        #box {/*display: flex;*/height: 500px;width: 1000px;background-color: plum;}.div1{width: 150px;height: 150px;background-color: lightblue;}.div2{width: 150px;height: 150px;background-color: lightgreen;}.div3{width: 150px;height: 150px;background-color: lightsalmon;}.fontCenter{text-align: center;line-height: 150px;font-size: 50px;}

1.1使用flex实现水平排列

我们给容器原始#box加上display: flex;这行。表示开启flex。这时候就已经实现了水平排列功能。非常的简单,这个功能用浮动来做就麻烦的多。

  #box {display: flex;height: 500px;width: 1000px;background-color: plum;}

1.1.2 左右分区

我想实现box1和box2在左边,box3在右边。这个功能通过flex非常的好实现。只需要给box3设置margin-left:auto。box3就会把能margin-left的都margin了。自己也就到了最右边,也就实现了我们想要的功能。

        .div3{width: 150px;height: 150px;margin-left: auto;background-color: lightsalmon;}


如果你想要把box2和box3一起移动到最右边,只需要把margin-left:auto设置在box2上面就可以了。

        .div2{width: 150px;height: 150px;margin-left: auto;background-color: lightgreen;}

2.理解flex-basis

flex-basis这个属性是非常重要的一个属性,也是最容易混淆的一个属性。最开始以为和width属性差不多,也就没怎么重视。不弄清楚会造成和他相关属性的理解混乱。
其实flex-basis非常的好理解,你只需要逐字逐句的把他的定义理解一遍就行。

定义:
它的初始值是 auto,此时浏览器会检查元素是否设置了 width 属性值。如果有,则使用 width 的值作为 flex-basis 的值;如果没有,则用元素内容自身的大小。如果 flex-basis 的值不是 auto,width 属性会被忽略。
分为两种情况:
1.没有设置flex-basis,这时候flex-basis为默认值auto。
这种情况很常见,就是只设置了display:flex的时候。别的flex属性都没设置。此时浏览器会检查元素是否设置了 width 属性值。如果有,则使用 width 的值作为 flex-basis 的值;如果没有,则用元素内容自身的大小。 这句话暗含了一个很重要的信息就是在flex里面,flex-basis是优先用于处理宽度的。更切确的说,在flex里面,根本不存在width,如果用户没设置flex-basis的值,flex系统会把width的值赋值给flex-basis。flex-basis有了值后,width被忽略,变成了工具人。
2.设置了flex-basis的值,这时候width会忽略,元素的宽度用flex-basis的值表示。
这点就更加验证了在flex里面,flex-basis是优先于width来处理宽度的。在flex里面只要用户设置了flex-basis的值,我flex系统都不正眼瞧你width。
总之,在设置了display:flex之后,你最好设置flex-basis的值,并且忽略width。 虽然width也是可以用,但就显得拖泥带水。就像你一只脚已经踏入我flex这个先进的布局系统里面,另一只脚还停留在原始的CSS里面。既然你已经用了flex这个系统,用就用全套,就用我flex-basis吧。而且我还可以和我另两个兄弟flex-grow 和 flex-shrink一起配合使用。组成flex三巨头。
虽然说flex-basis是替换了width,并且他和width起到的作用是差不多的。但他们还是不同的。
当width为0的时候,我们是看不到元素的。但当flex-basis为0,或者为auto并且width没有设置值的时候(默认值为0),该元素的大小是由内容大小决定的。也就是只要有内容,flex-basis是不会看不到元素的。这在后面会从例子中体现。

设为auto和0也是有区别的。一个最明显的区别就是为0的时候,如果内容文字有空格是自动换行的。
这个可以通过设置white space:nowrap解决。auto就没有这个问题。
例一:
div1同时设置了width和 flex-basis,width的值将会失效。

        .box1{width: 150px;height: 150px;flex-basis: 200px;background-color: lightsalmon;}.box2{width: 150px;height: 150px;background-color: lightgreen;}.box3{width: 150px;height: 150px;background-color: lightblue;}

宽度使用的是flex-basis的值而不是width的。

通常用法:
这里给父元素加了宽高和背景。

        #content {display: flex;width: 1000px;height: 500px;background-color: lightpink;}.box1{height: 150px;flex-basis: 15%;background-color: lightsalmon;}.box2{height: 150px;flex-basis: 15%;background-color: lightgreen;}.box3{height: 150px;flex-basis: 20%;background-color: lightblue;}

3.理解flex-grow

在设置了flex-basis后,元素就占用了一定的空间。但还留有一些空间。这些空间可以通过flex-grow来占领。
以上面的这种情况为例,box1,box2,box3分别占据了父元素的15%,15%和20%的宽度,一共占据了50%宽度。还剩下50%的空白空间。

我们可以给box设置flex-grow属性。分别给三个box设置flex-grow:1。表示权重都是1,那么三个box将会平分剩下的空间。

        .box1{height: 150px;flex-basis: 15%;flex-grow: 1;background-color: lightsalmon;}.box2{height: 150px;flex-basis: 15%;flex-grow: 1;background-color: lightgreen;}.box3{height: 150px;flex-basis: 20%;flex-grow: 1;background-color: lightblue;}

父元素的宽度是1000px。
以box1为例,box1原来的宽度是1000*15%=150。grow的宽度是1000 * 50% * 1/3=500/3。所以box1最终宽度是150+500/3。大家可以在开发者工具对比一下前后宽度就明白了。

如果子元素flex-grow的总和超过1,那么就是按照上面的方式,按比例(权重)瓜分剩下的空间。
还存在一种情况是flex-grow的总和没有超过1的,比如出现小数的情况。

        .box1{height: 150px;flex-basis: 15%;flex-grow: 0.3;background-color: lightsalmon;}.box2{height: 150px;flex-basis: 15%;flex-grow: 0.3;background-color: lightgreen;}.box3{height: 150px;flex-basis: 20%;flex-grow: 0.1;background-color: lightblue;}

这种情况就不会完全瓜分剩下的全部空间。而是子元素将自己的flex-grow值和剩余空间相乘,计算出的值就是增加的值。以box1为例,剩余空间是100050%=500,原来的宽度是10000.2=200,500*0.3=150这是增加的值,最后宽度是200+150=350。
和总和超过一的区别就是,不是按照各个子元素直接的权重比例来分配了,而是直接用flex-grow这个值乘以剩余空间来获取增长的值。

3.1 flex-grow的实际用途

其实上面提到的两种用法在实际开发中基本是用不上的。谁会给已经设置好宽度的元素又增加点宽度呢?实际上,下面这种用法才是最常见的。
下面这个效果在网页里面是经常用到的。左边是主要内容区,右边是一些小模块。使用flex-grow可以快速实现这样的功能。
我们想实现的效果是box1:box2=3,也就是box1宽度是box2宽度的3倍。

         #content{display: flex;height: 700px;font-size: 50px;}.box1{height: 100%;flex-grow: 3;background-color: lightgreen;}.box2{height: 100%;flex-grow: 1;background-color: lightblue;}
<div id="content"><div class="box1">box1</div><div class="box2">box2</div>
</div>

但实际上,如果你打开开发者工具,测量一下,box1和box2的宽度,你会发现两者比例根本不是3:1。这是为什么?
也许你一开始就看出我这样写是有问题的,那么恭喜你,你对flex理解的很深刻。原因出在你没有设置flex-basis=0上。注意,一定要设置为0,不写flex-basis默认值是auto。为什么设置flex-basis为0就可以了呢?

我们来分析一下上面的代码的执行逻辑:
上面的代码我们没有设置flex-basis,也没有设置width。flex-basis等于auto,width没有值。所以使用内容的宽度。 不信你把flex-grow属性都去掉,就会看到下面的效果。
这里引出flex-basis和width一个重要的区别。flex-basis默认值是auto,并且没有设置width的时候,flex-basis的值等于内容的宽度,值并不是为0的。这就是导致上面代码box1和box2不能实现3:1比例的原因。要想实现box1和box2比例是3:1,box1和box2的起始宽度必须是0。这样flex-grow就可以按比例平分父元素空间了。

只需要给两个box都加上flex-basis:0就可以实现按比例平分的效果了。

         .box1{height: 100%;flex-grow: 3;flex-basis: 0;background-color: lightgreen;}.box2{height: 100%;flex-grow: 1;flex-basis: 0;background-color: lightblue;}

4.理解flex-shrink

在《深入理解CSS》这本书里面,有下面这样一个图。给三个元素设置flex-basis都等于40%。将会溢出一部分。

我也照着做了一遍。

<div id="content"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</div>
        #content{display: flex;height: 500px;width: 1000px;background-color: lightpink;font-size: 50px;}.box1{height: 200px;flex-basis: 40%;background-color: lightgreen;}.box2{height: 200px;flex-basis: 40%;background-color: lightblue;}.box3{height: 200px;flex-basis: 40%;background-color: lightsalmon;}

发现和想象中的不一样。box3并没有溢出。但三个flex-basis加起来确实是超出父元素宽度了。
但我心想,大牛写的书,应该不会骗我。一定是我写错了。但我没有写错,书里面说的也没错。

问题就出在flex-shrink身上。可是我也没写flex-shrink啊。你没写flex会自动给你添加上,而且默认值还不是0,而是1。
实际上,你上面的代码等价于下面的代码。

        .box1{height: 200px;flex-basis: 40%;flex-shrink: 1;background-color: lightgreen;}.box2{height: 200px;flex-basis: 40%;flex-shrink: 1;background-color: lightblue;}.box3{height: 200px;flex-basis: 40%;flex-shrink: 1;background-color: lightsalmon;}

flex-shrink的作用和flex-grow相反。当合计的flex-basis的总宽度超过父元素的总宽度的时候。flex-shrink会把子元素按比例减少,把溢出的宽度抹没。
比如前面的例子总宽度是40%*3=120%,也就是溢出了20%的宽度,也就是1000 * 20%=200px的宽度。怎么把这200px给抹没掉呢?就是从前面三个子元素上面扣宽度。三个子元素的flex-shrink都是1,也就是平均扣除200/3px。
就能实现抹没的效果。打开开发者工具,量一下子元素的宽度,确实是减少了这些宽度的。

如果说,我就想有这种溢出的效果,那么就把flex-shrink都设为0就好了。就可以达到下面这样效果。也就是书上提到的效果。

5.flex属性的使用

介绍完了flex-basis,flex-grow和flex-shrink后,我们可以用他们的一种精简写法flex。

例如:
我们给三个子元素都写上flex:1,就可以实现三等分的效果。

        .box1{height: 200px;flex: 1;background-color: lightgreen;}.box2{height: 200px;flex: 1;background-color: lightblue;}.box3{height: 200px;flex: 1;background-color: lightsalmon;}

这个效果是真正三等分的。

这里的flex:1相当于下面的写法。三个值分别表示flex-grow,flex-shrink,flex-basis。
注意,flex:1和只写一个flex-grow:1是不一样的。
写成flex:1,flex-shrink,flex-basis的默认值是1和0%。
而写成flex-grow:1,flex-shrink,flex-basis的默认值是1和auto。也就是flex-basis是不同的。
而flex-basis值为0和auto的不同前面已经验证过了,就是auto在没有width的情况下宽度是内容的宽度。这会导致flex-grow不能整体平均分。具体见flex-grow小节。

flex:1 1 0%

或者

flex-grow:1
flex-shrink:1
flex-basis:0%

除了flex-basis会单独当类似width使用外。flex-grow,flex-shrink基本是很少使用的。
flex-grow也很少单独使用,因为使用flex-grow的时候,一般就是为了按比例分配布局。这时候要同时设置flex-basis:0。
所有一般使用下面的方式来替代单独使用flex-grow。因为这种方式可以快速达到按比例分配布局。

flex:1

至于flex-shrink基本就不会用,也就设个默认值让子元素不会超出。

使用flex实现常用效果

1.包裹内容水平排列
设置flex后,子元素也不要设置width,就会出现这种包裹内容水平排列的效果。

2.第一个子元素固定,第二个子元素撑满剩余高度。
flex-shrink的值是无所谓的,因为并没有超出父容器宽度。

3.三足鼎立型。两边固定宽度,中间填满剩余空间

4.按比例划分

深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解相关推荐

  1. 理解 CSS 布局和块级格式上下文

    本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用 过CSS 布局你 ...

  2. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  3. 深入理解CSS盒模型 - 程序猿的程 - 博客园

    深入理解CSS盒模型 本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...

  4. 一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文

    CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...

  5. 深入理解CSS:font metrics, line-height 以及 vertical-align

    转载自:http://web.jobbole.com/91180/ 深入理解CSS:font metrics, line-height 以及 vertical-align 2017/04/28 · C ...

  6. 深入理解CSS中的层叠上下文和层叠顺序

    转载一篇张鑫旭大神的文章(对于理解GPU硬件加速和网页分层还是有一点帮助的),原文地址:深入理解CSS中的层叠上下文和层叠顺序 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论 ...

  7. CSS Spritec下载,精灵图,雪碧图,初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  8. 字节青训前端笔记 | 理解CSS

    CSS 作为前端技术栈中关键一环,对页面元素及样式呈现起到了直接作用.本节课旨在通过对 CSS 的工作流程及原理.页面中 CSS 使用方法等详细解读,帮助前端新手建立对 CSS 的全面而深刻的认知. ...

  9. 深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素

    深入理解CSS之 如何使子元素撑宽 设置了display: block; 的父元素 先写一个模板,晚点再吐槽 吐槽 实现原理 与 更多支持的属性 不想使父级的 块 属性消失怎么办 这种属性规则有什么作 ...

最新文章

  1. 汇总 | OpenCV4中的非典型深度学习模型
  2. centos6下的mysql的安装
  3. 反射_获取字节码Class对象的三种方式
  4. 5学习周报_你做好周报的“闭环管理”了吗?——“周报管理知多少”
  5. Windows家庭版远程服务
  6. Filter的基本配置
  7. Scala学习02——Scala类和对象
  8. RedHat6使用centos6的yum源
  9. FFT(不ji是干甚用的diao操作)
  10. Linux网络命令之 `brctl`
  11. 【Python-神经网络预测】
  12. matlab进行多光栅衍射仿真,光栅衍射MATLAB仿真.docx
  13. Java快排两种写法
  14. 计算机和数学专业哪个难,学计算机专业难吗 数学很差能学吗
  15. 基于ASRT的开源实时语音转文本
  16. 【数据库系统概论】基础知识总结
  17. mysql中having的意思_正确理解MySQL中的where和having的区别
  18. 编码与解码(encode、decode)
  19. 收藏-局域网内部邮件系统的搭建
  20. 广州二手房价分析与预测

热门文章

  1. html塔防游戏,HTML5 版塔防游戏
  2. 潍坊医学院计算机实验室里哪个门近,医学研究试验中心试验室安全知识题库-潍坊医学院.PDF...
  3. dbd-mysql测试_DBD::mysql的cpan安装测试失败,找不到符号。OSX莫哈韦
  4. 区块链投资基金致力于银行的一亿美…
  5. 你知道这个提高 Java 单元测试效率的 IDEA 插件吗
  6. [ES]-Elastic数据类型和cat命令
  7. 拥抱组件化开发,手淘项目内部架构分享
  8. Fabric架构原理总结
  9. 如何下载网站中的blob:https:// 视频
  10. linux自动获取ipv6,IPv6系列-详解自动分配IPv6地址