第七十七章 弹性布局 Flex

我们以前的布局方法,虽然可以完成三个维度,但是每个维度都是各自为政的,一个混乱的体系。

而弹性布局则是一维布局,它有两个轴,优先关心主轴,然后用侧轴辅助。这有点像什么?我们写字,说起来就是从左往右写,这是我们优先关注的方向,但是事实上,我们一行写不下的时候,会写到下一行,这里就有一个从上往下的规则(但是很少被提及)作为辅助。

虽然我们还什么都不了解,但是说到这里应该很容易猜到,这两个轴的方向绝对是弹性布局中的一个基础。因为轴的方向一变,肯定所有元素的排列都不一样了。这简直是规定流水的方向一样的关键。

嗯,弹性布局里的流(flex-flow)就描述这两个问题。在展开之前,说明一下:在前期不建议大家使用任何复合属性(简写形式),因为有些简写十分复杂,所以一律展开书写,我也不会对于简写格式进行任何说明。

展开为两个属性 flex-direction(主轴方向),和 flex-wrap(是否换行)。继续按着写字理解:主轴方向说的就是我们书写的方向,是否换行说的是我们在侧轴方向是否进行发展。来,对应从左往右书写,从上往下换行来理解一下。

flex-direction(主轴方向)取值如下:

  • row: flex 容器的主轴被定义为与文本方向相同(对于我们就是从左往右)。这是默认值;
  • row-reverse: 和上面相反;
  • column: flex 容器的主轴和块轴相同(对于我们就是从上到下);
  • column-reverse: 和上面相反。

于是我们发现,加上 reverse 就表示相反方向。这样四个值,其实只是两个方向,和两个反方向。row 是横向,column 是纵向。后一个单词可能我们没见过,但是 row 我们学过,而且前面表格的 tr 就是 table row 的缩写,表示表格中的行。

flex-wrap(是否换行)取值如下:

  • nowrap: 不换行,打死不换行,溢出都不换行,这是默认值;
  • wrap: 有需要就换行;
  • wrap-reverse: 有需要就换行,反向换行。

如果主轴是左右方向,正常的换行方向就是从上往下,反向你懂得。不换行就是不在侧轴方向发展,那就没所谓了。

如果主轴是上下方向,那么换行方向就是从左往右,反向你依旧懂得。


我知道,你们又拿起了板砖。说我讲了一章弹性布局,哪一句都听懂了,就是完全不知道怎么用,什么破课程,退钱退钱……

我就说两点:第一、没交钱先把钱交一下,然后才能排队退钱;第二、你现在给父元素应用上前面所学的三个属性,那么里面的子元素就像一个个文字一样乖乖排列好了呀~

这,难么?

代码能有多难?

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第七十七章 弹性布局 Flex

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏