深入理解 flex 布局以及计算

起因

对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档。

注:本篇博文不适合未接触过Flex 布局的人, 如果想了解flex 布局基础。请参考理解Flexbox:你需要知道的一切

对于flex盒模型的设计期望

flex盒模型是被期望设计成:

  • 在任何流动的方向上(包括上下左右)都能进行良好的布局
  • 可以以逆序 或者 以任意顺序排列布局
  • 可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列
  • 可以弹性的在任意的容器中伸缩大小(今天重点研究的主题)
  • 可以使子元素们在容器主轴方向上 或者 在容器侧轴方向上 进行对齐
  • 可以动态的 沿着主轴方向 伸缩子级的尺寸,与此同时保证父级侧轴方向上的尺寸

主轴和侧轴

很有必要先向大家解释清楚 3个问题

  • 什么是主轴
  • 什么是侧轴
  • 他们是如何切换的

首先每一根轴都包括 三个东西:维度、方向、尺寸

什么意思呢?

  • 所谓的维度实际上就是意思就是子元素 横着排还是竖着排(x 轴 或 y 轴)
  • 方向 即排列子元素的顺序 顺序还是逆序
  • 尺寸 即width[height] : 每一个子元素在主轴方向所占的位置的总和 如果主轴是水平的,那么尺寸就是父元素内所有itemouterWidth总和,如果主轴是垂直的,那么尺寸就是父元素的outerHeight

主轴是依靠 flex-direction 和 所有子元素在主轴方向上的item-size的总和确定的,flex-direction这个属性可以控制子元素的排列方向和排列顺序。

侧轴是依靠 flex-wrap 和 所有子元素在主轴方向上的item-size的总和确定的,flex-wrap 可以控制子元素 在侧轴方向上的排列方式以及顺序。

而关于不同种类不同情况下的 item-size 我们会在下面讨论,现在您可以简单将它理解为width[height]。

img

盗规范中的一张图

为了方便 flex-direction + flex-wrap 合并成了一个属性 flex-flow

通过这个简单而复杂的属性,我们就能够控制所有子元素的水平和垂直方向,逆序排列和顺序,换行和不换行。

主侧轴的切换十分简单,当主轴设定的时候,它的垂直面,就默认被设定成了侧轴。如:

flex-flow: row-reverse wrap-reverse;

这条CSS属性能够告诉我们那些信息?

  • 子元素是横着排列的,主轴是水平的横轴,侧轴是竖直的纵轴
  • 子元素是逆序并沿着主轴排列的,从右到左
  • 子元素是换行的
  • 子元素是逆序并沿着侧轴排列的,从下到上

FFC (flex formatting context)

Flexbox 布局新定义了格式化上下文,类似 BFC(block formatting context)。有多类似呢? 就是除了布局和一些细节不同以外的一切规则都和 BFC 是相同的

注意 : 我所指的Flexbox 是指设置了 display: flex;display: inline-flex;的盒子。不是指单单设置了 display: flex; 的盒子。

例如,设置了 display: flex;display: inline-flex的元素,和BFC一样,不会被浮动的元素遮盖,不会垂直外边距坍塌等等。

而对于设置了 display: inline-flex 的盒子来说,我们可以类比 display: inline-box;行理解。即 一个被行列化后的 Flexbox。它不会独占一行,但是可以设置宽和高。

与BFC的细微区别

但需要注意的是以下几点细节,Flexbox 布局 和 Block 布局是有细微区别的

  • Flexbox 不支持 ::first-line::first-letter 这两种伪元素
  • vertical-align 对 Flexbox 中的子元素 是没有效果的
  • floatclear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox 是有效果的!)
  • 多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素(鱼和熊掌不可得兼嘛)
  • Flexbox 下的子元素不会继承父级容器的宽

flex item(flex 子元素)

CSS解析器会把 定义了 display: flex;display: inline-flex; 的 Flexbox 下的子元素外部装进一个看不见的盒子里,我们通过排列这些盒子来达到排序、布局、 伸缩的目的。

规范中把这种盒子 称为 flex item,而子元素中包括了 标签节点 以及 文本节点。标签节点很容易理解,需要注意的是文本节点。

默认情况下,flex 会将 连续的文本节点 装进 flex-item 之中,使文本可以和标签节点一起排序和定位。

值得注意的是,空格也是文本节点,所以 white-space 会影响Flexbox 中的布局:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部