当前位置:首页> 文章> CSS

Flex 四、弹性处理与刚性尺寸

:2019-06-09   :舒彬琪   :15

弹性处理与刚性尺寸

在进行弹性处理之余,其实有些场景我们更希望元素尺寸固定,不需要进行弹性调整。设置元素尺寸除了width和height以外,flex还提供了一个flex-basis属性。

flex-basis设置的是元素在主轴上的初始尺寸,所谓的初始尺寸就是元素在flex-growflex-shrink生效前的尺寸。

1. 与width/height的区别

首先以width为例进行比较。看下下面的例子。#container {display:flex;}

<div id="container">  <div>11111</div>
  <div>22222</div>
</div>

(1) 两者都为0

img

  • width: 0 —— 完全没显示

  • flex-basis: 0 —— 根据内容撑开宽度

(2) 两者非0

img

  • width: 非0;

  • flex-basis: 非0

—— 数值相同时两者等效

—— 同时设置,flex-basis优先级高

(3) flex-basis为auto

img

flex-basis为auto时,如设置了width则元素尺寸由width决定;没有设置则由内容决定

(4) flex-basis == 主轴上的尺寸 != width

img

  • 将主轴方向改为:上→下

  • 此时主轴上的尺寸是元素的height

  • flex-basis == height

2. 常用的复合属性 flex

这个属性应该是最容易迷糊的一个,下面揭开它的真面目。

flex = flex-grow + flex-shrink + flex-basis

复合属性,前面说的三个属性的简写。

img

一些简写

  • flex: 1 = flex: 1 1 0%

  • flex: 2 = flex: 2 1 0%

  • flex: auto = flex: 1 1 auto;

  • flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩

flex:1 和 flex:auto 的区别

其实可以归结于flex-basis:0flex-basis:auto的区别。

flex-basis是指定初始尺寸,当设置为0时(绝对弹性元素),此时相当于告诉flex-growflex-shrink在伸缩的时候不需要考虑我的尺寸;相反当设置为auto时(相对弹性元素),此时则需要在伸缩时将元素尺寸纳入考虑。

因此从下图(转自W3C)可以看到绝对弹性元素如果flex-grow值是一样的话,那么他们的尺寸一定是一样的。

img