读完 flexbox 细则之后学到的 11 件事在经历了多年的浮动布局和清除浮动的折磨之后,flexbox 就像新鲜空气一般,使用起来是如此的简单方便。 然而最近我发现了一些问题。当我认为它不应该是弹性的时候它却是弹性的。修复了之后,别的地方又出问题了。再次修复之后,一些元素又被推到了屏幕的最右边。这到底是什么情况? 当然了,最后我把它们都解决了,但是黄花菜都凉了而且我的处理方式也基本上没什么规范,就好像那个砸地鼠的游戏,当你砸一个地鼠的时候,另一个地鼠又冒出来,很烦。 不管怎么说,我发现要成为一个成熟的开发者并且真正地学会 flexbox 是需要花时间的。但是不是再去翻阅另外的 10 篇博客,而是决定直接去追寻它的源头,那就是阅读 The CSS Flexible Box Layout Module Level 1 Spec 。 下面这些就是我的收获。 1. Margins 有特别的功能我过去常常想,如果你想要一个 logo 和 title 在左边,sign in 按钮在右边的 header ... 点线为了更清晰 ... 那么你应该给 title 的 flex 属性设置为 1 就可以把其他的条目推到两头了。 .header { display: flex;}.header .logo { /* nothing needed! */}.header .title { flex: 1;}.header .sign-in { /* nothing needed! */} 这就是为什么说 flexbox 是个好东西了。看看代码,多简单啊。 但是,从某种角度讲,你并不想仅仅为了把一个元素推到右边就拉伸其他的元素。它有可能是一个有下划线的盒子,一张图片或者是因为其他的什么元素需要这样做。 好消息!你可以不用说“把这么条目推到右边去”而是更直接地给那个条目定义 举个例子,如果左边的条目是一张图片: 我不需要给图片使用任何的 flex,也不需要给 flex 容器设置 .header { display: flex;}.header .logo { /* nothing needed! */}.header .sign-in { margin-left: auto;} 你或许会想这有一点钻空子,但是并不是,在概述 里面 这个 方法就是用来将一个 flex 条目推到 flexbox 的末端的。它甚至还有自己单独的章节, 使用 auto margins 对齐 。 哦对了,我应该在这里添加一个说明,在这篇博客中我会假设所有的地方都设置了 2. min-width 问题 你或许会想一定有一个直截了当的方法确保在一个容器中所有的 flex 条目都适应地收缩。当然了,如果你给所有的条目设置 还是举例说吧。 假设你有很多的 DOM 元素来显示出售的书籍并且有个按钮来购买它。 (剧透:蝴蝶最后死了) 你已经用 flexbox 安排地很好了。 .book { display: flex;}.book .description { font-size: 30px;}.book .buy { margin-left: auto; width: 80px; text-align: center; align-self: center;} (你想让 'Buy now' 按钮在右边,即使是很短的标题的时候,那么你就要给他设置 这个标题太长了,所以他占用了尽可能多的空间,然后换到了下一行。你很开心,生活真美好。你洋洋得意地将代码发布到生产环境并且自信地认为没有任何问题。 然后你就会得到一个惊喜,但不是好的那种。 一些自命不凡的作者在标题中用了一个很长的单词。 那就完了! 如果那个红色的边框代表手机的宽度,并且你隐藏了溢出,那么你就失去你的 'Buy now' 按钮。你的转换率,可怜的作者的自我感觉都会遭殃。 (注:幸运的是我工作的地方有一个很棒的 QA 团队,他们维护了一个拥有各种类似于这样的令人不爽的文本的数据库。也正是这个问题特别的促使我去阅读这些细则。) 就像图片展示的那样,这样的表现是因为描述条目的 那么解决办法是什么呢?重写这个有问题的属性,将 这样就可以在条目里面处理文本了。我建议包裹单词。那么你的 CSS 代码就会是下面这个样子: .book { display: flex;}.book .description { font-size: 30px; min-width: 0; word-wrap: break-word;}.book .buy { margin-left: auto; width: 80px; text-align: center; align-self: center;} 这样的结果就是这个样子: 重申一下, 下个章节我会处理尽管我明确写明了但是 ‘Buy now’ 按钮仍然不总是 80px 宽的问题。 3. flexbox 作者的水晶球 就像你知道的, 我必须承认为了达到我想要的效果,我在不停地尝试和验证这三个属性上面花费了很多时间。 但是直到现在我才明白,我其实只是需要这三者的一个组合。
我希望你还不是很惊奇,因为还有让你更惊奇的。 你看,Flexbox Crew (我通常认为 flexbox 团队的皮衣是男女都能穿的尺寸)。对,Flexbox Crew 知道我用得最多的就是这三个属性的组合,所以他们给予了这些组合对应的关键字。 第一个场景是 早就该想到它了。 它就好像用 让我们再回到之前那个丑陋的图书的例子。让我们的 'Buy now' 按钮更胖一点... ... 我只要设置 .book { display: flex;}.book .description { font-size: 30px; min-width: 0; word-wrap: break-word;}.book .buy { margin-left: auto; flex: none; width: 80px; text-align: center; align-self: center;} (是的,我可以设置 4. inline-flex 坦白讲,几个月前我才知道 但是我估计有 28% 的人还不知道这件事,所以现在你就不是那 28% 了。 5. vertical-align 不会对 flex 条目起作用 或者这件事我并不是完全的懂,但是从某种意义上我可以确定,当使用 现在我知道了,细则里面直接写了, vertical-align 在 flex 条目上不起作用 ” (注意:就好像 6. margins 和 padding 不要使用 %这并不仅仅是一个最佳实践,它类似于外婆说的话,去遵守就好了,不要问为什么。 '开发者们在 flex 条目上使用 paddings 和 margins 时,应该避免使用百分比' — 爱你的,flexbox 细则。 下面是我在细则里面看到的最喜欢的一段话。 注解:这个变化糟透了,但是它精准地抓住了世界的当前状态(实现无定法,CSS 无定则) 当心,糖衣炮弹进行中。 7. 相邻的 flex 条目的边缘不会塌陷你或许知道有时候会出现相邻条目的边缘塌陷。你或许也知道其他的时候 不会 出现边缘塌陷。 现在我们都知道相邻的 flex 条目是不会发生边缘塌陷的。 8. 即使 position: static,z-index 也会有效我不确定我是否真的在乎这一点。但是我想到或许有一天,它就会真地有用。就好像我冰箱里有一瓶柠檬汁。 某一天我家来了其他人,然后他会问:'嗨,你这里有柠檬汁吗?',我这时就会告诉他:'有的,就在冰箱里',他会接着说:'谢谢,大兄弟。那么如果我想给一个 flex 条目设置 z-index,我需要指定 position 吗?',我会说:'兄弟,不需要,flex 条目不需要这样。' 9. Flex-basis 是精细且重要的 一旦 如果你有 3 个 flex 条目,它们的 flex 值分别为 3,3 和 4。那么当 然而,如果你想要 flex 更友好但是有点不太可预测的话,使用 看看这个很棒的示意图。 我十分确定我读到的关于 flex 的博客中至少有一篇提到了这一点,但是我也不知道为什么,直到我看到上面这张图才想起来。 10. align-items: baseline 如果我想让我的 flex 条目垂直对齐,我总是使用 11. 我很蠢下面这段话不论我读几遍,都无法理解它的含义... 在主轴上内容大小是最小内容大小的尺寸,并且是加紧的,如果它有一个宽高比,那么任何定义的 min 和 max 的大小属性都会通过宽高比转换,并且如果主轴的 max 尺寸是确定的话会进一步加紧。 这些单词通过我的眼睛被转化成电信号穿过我的视神经,刚刚抵达的时候就看到我的大脑打开后门一溜烟跑了。 就像米老鼠和疯狂麦克斯 7 年前生了个孩子,现在和薄荷酒喝醉了,使用他从爸爸妈妈吵架时学到的语言肆意的辱骂周围的人。 女士们,先生们,我已经放弃了体面开始胡言乱语了,这意味着你可以关闭这篇文章了(如果你看这个是为了学习的话你可以在这里停止了)。 读这篇细则我学到的最有趣的事情是,尽管我看过大量的博文,以及 flexbox 也算是相对简单的知识点,但是我对其的了解曾是那么的不彻底。事实证明 '经验' 不总是起作用的。 我可以很开心的说花时间来阅读这些细则已经得到了回报。我已经优化的我的代码,设置了 auto margins,flex 的值也设置成了 auto 或者 none,并在需要的地方定义了 min-width 为 0。 现在这些代码看起来好多了,因为我知道这样做是正确的。 我的另外一个收获就是,尽管这些细则在某些方面正如我所想的基于编者视角并有些庞杂,但是仍然有有很多友好的说明和例子。甚至还高亮了那些初级开发者容易忽略的部分。 然而,这个是多余的,因为我已经告诉了你所有有用知识点,你就不用再自己去阅读了。 现在,如果你们要求,那么我会再去阅读所有其他的 CSS 细则。 PS:我强烈建议读读这个,一个浏览器 flexbox bugs 的清单: https://github.com/philipwalton/flexbugs . 掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为掘金 上的英文分享文章。内容覆盖 Android 、 iOS 、 React 、 前端 、 后端 、 产品 、 设计 等领域,想要查看更多优质译文请持续关注 掘金翻译计划 。 |
|