对于大多数人(如果你写过CSS)来说,Flexbox是完美的,但它是否适用于所有场景?简而言之,我将给出几个可能的场景,需要你重新思考Flexbox模型的使用。顺便说一下,我是Flexbox的忠实粉丝。曾经写过一篇关于Flexbox的详解,算是最全面的文章了。当然,我们应该知道如何使用Flexbox,什么时候不应该使用,什么地方最好使用。以下是我最不应该使用Flexbox的3种场景,以及原因。1.使用Flexbox作为网格系统很长一段时间以来,很多人(包括我自己)都在滥用CSS盒模型。从复选框点击hack到“纯CSS图形”,我们似乎沉迷于各种古怪的技巧——感觉浮夸或熟练的技巧。我不反对,但我们误解了CSS规范,不是吗?我们没有在应该使用它们的地方使用它们——主要原因之一是我们可以,另一个是我们必须这样做。有时只是为了好玩(我想我就是其中之一)。也就是说,如果您选择在布局中使用Flexbox模型作为网格系统,那么您就是在误解规范。你还能玩得开心吗?当然可以,但这就像在滥用CSS盒模型。它没有被设计成一个完整的网格系统。虽然你可以随心所欲地使用Flexbox模型,当然我已经胡乱使用了,但初衷是一样的。GridLayout-2017年火了,因为所有主流浏览器都开始支持它。我可以使用Flexbox作为布局中唯一的网格系统吗?前额!当然不是。为什么?如果只是为了一个复杂的布局,或者单纯的针对移动端重构布局,确实有这样的可能。其实你可以摆脱这种想法,虽然曾经我尝试过只用Flexbox来做复杂的布局-只是因为它可以做到,并探索Flexbox的可能性。有什么注意事项吗?你必须记住一件事。如果您必须与旧版本的IE兼容(它们是否支持任何其他不错的功能?),那将是一个大问题,因为用户看不到任何东西——什么也不会显示。但是,如果您在这些浏览器上使用Flexbox模型进行渐进增强,您的回退可能是表格布局,这对老IE用户来说效果很好。Flexbox还支持真实网格系统的一些标准功能——这些都是非常好的功能。虽然它不是很“标准”。这里的标准是指像圣杯布局这样的常见用法。所以禁止将其作为一个完整的网格系统来使用。稍后将继续讨论。2.完全控制其视觉位置的能力越大,责任就越大……那就虐吧!(我补充说)。网格布局最好的特点之一就是你可以自由指定内容的显示位置,而不用考虑html源代码的顺序。Flexbox模型没有顺序属性吗?他们是这样。但是猫有四只脚,而人类只有两条。PS:这里的意思是,毕竟还是有区别的,不同的东西不能一视同仁,即使看起来很相似。上面的猫星很帅,但就算穿上西装,依旧不是人!毫无疑问,只有人类才是人类。这与通过order属性实现“排序”的Flexbox是一样的。只适用于简单的重排场景,如下:beforeflexboxafterrearrangementafterflexbox但是,还是以元素html源码的顺序为准。所以,其实还是没有脱离“猫人”的本质。它对源顺序的处理与CSS网格布局完全不同。网格布局是另外一个话题,这里不再详细讨论。3.多列布局我想不会有多少人会用Flexbox模型来做这个。值得一提的是,除了Flexbox,CSS3还提供了其他增强的布局方式——Flexbox恰好用来完成类似的功能。如果你想这样做,那么请考虑使用CSS3已经提供的适当的布局方法。我。排除特定形状如果您需要构建复杂的布局并希望在自定义区域中键入内容或特定几何形状来包裹内容,请使用正确的方法。虽然你可以将它包裹在弹性项目(flexitem)中,但还是要用正确的方法来处理排斥和内容包裹。二.实现多栏多栏排版是Indesign等传统桌面排版软件的核心功能。当调整列大小或无法包含所有内容时,列中的文本将自动流入另一列。如果你的项目需要实现这个功能,可以直接实现CSS3多栏布局。所以,啰嗦了,请用正确的方法来实现这个功能。多列布局的一列是否也可以具有flex-item(弹性项)特性?我没玩过-不确定。总而言之,Flexbox很棒!真的很有用。非常有必要深入了解它以了解何时何地应该使用它们。对于Flexbox来说,它最大的优势就是可以在整个页面中自由布局独立的部分。感觉不错?
