第七十八章 弹性布局补全

于是乎,我们解决了排列的问题,可以方便的横排,竖排,反着排,还不用消除浮动了。但这就够了么?来个新属性吧,order,表示元素在主轴上的排列顺序。额,这个当然不是整体定义,而是对布局中某一个元素进行的细致调整。所以算是个体属性。它的默认值为 0,数值越大有靠后,越小越靠前,可以取负值,不能取小数。然后要注意这只是视觉上的次序,而没有改变元素的真正顺序。比如对屏幕阅读器,这个次序就不会产生影响。

这,并不完美。我们只是简单的解决了一下排列。确实,已经比以前自由太多了。但,这不足以成为一套系统。它,能解决各种设备尺寸跨度大的问题么?

不能。媒体查询也是 CSS3 的内容,我们没必要把这么方便的东西费掉不用。但是,我们可以给它做一些补充。毕竟我们媒体查询不太可能细致的规定每一个尺寸,那么自适应的能力,就是这个布局方法是否好用的重要标准。

如果我们布局中的子元素可以自动的膨胀和收缩,来适应宽度,就很开熏。但这还不够。也许这一行中的元素,我们并不希望都增长,或者我希望他们增长的量不同……

反正要求复杂,但是希望实现简单。(我就这么事儿多,你咬我呀!

flex-grow,grow 是生长的意思,这个属性是规定这个元素如何扩张的。但是扩张的前提是,主轴上存在空白,否则就没有生长的空间。

默认,子元素不做扩张,这时候 flex-grow 的值为 0。你可以给它设置为正数的值(在你没有了解具体规则的时候不要使用小数)。然后把主轴上的空余空间按这个数值比例分配给这些子元素。如果数值为 0 自然分不到,所以不扩张。你看,完全说得通。

相反的,我们还有 flex-shrink 来表示在主轴空间不足的时候子元素如何收缩,默认值是 1,即主轴空间不足时,该元素收缩。注意不能取负值。0 表示不收缩。

强调,这两个属性的计算比较复杂,我们这里先把整体脉络抓住,所以不做展开,大家可以自行查询。

自适应有了,但是我们又怕他们太随便,所以呢,还可以使用 min-width 和 max-width 进行限制。

然后还有一个属性 flex-basis,说的是元素沿主轴方向的尺寸,因为和主轴方向相关,那就可能是定义宽度,也可能是定义高度了。那,我们为什么不用宽高呢?用宽高就是固定尺寸了。而这个属性定义的是,元素在进行扩张或者收缩之前,在主轴方向上占用的长度

好,个体属性也都说了,所以我们的弹性布局已经讲完了。好像,也没啥,回头想想:

  • 规定了两个轴的方向,当然默认方向和我们预期一致,一般也不用改;
  • 然后元素可以自由调整次序,虽然只是视觉上的次序;
  • 元素在主轴上的基础尺寸,但这个尺寸不是最终结果;
  • 可以收缩和扩张,关键是还可以自由分配比例。

这是新内容,也确实有几个新属性,而且是新的体系。但谁说这个很复杂我想打谁,你也太小看我的理解能力了吧,好歹我也有小学三年级以上的理解水平啊!

哼唧,小老鼠为这些东西花了一个多星期的剥茧抽丝……(咳咳,这不是重点

你看到这些只是最基础的属性,后面还有一点,关于对齐的规则,不太多,而且和网格布局共用。

原文链接:https://www.ek58.com/archives/3679,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?