> Chris Coyier在CSS-tricks
上撰写的Flexbox的完整指南flexible框（“ flexbox”）在MSDN上的Internet Explorer 10中的布局（可选）
>flexbox的局限
旧语法不支持Flex-wrap。
仅在IE 10（包括手机）中支持元素语法。Internet Explorer 11和Edge（New Syntax）
firefox 28（新语法）
>功能检测并不是新事物。上述BBC文章于2012年3月发表，尽管它越来越受欢迎，但令人惊讶的是，看到网站仍在2008年推出了Paul Irish的特定条件类别。
> Modernizr（由Paul Irish做出了贡献）都是关于特征检测的：>利用凉爽的新网络技术非常有趣，直到您必须支持落后的浏览器。 Modernizr使您可以轻松编写有条件的JavaScript和CSS来处理每种情况，无论浏览器是否支持功能。非常适合轻松进行渐进式增强。
>
>尽管CSS现在具有本地功能检测，但目前没有足够的市场份额，无法可行，可用于现实世界中的使用。本文的其余部分将讨论如何抛弃IE条件评论，以支持JavaScript中的功能检测。每个项目都需要一组不同的功能才能运行。可以通过多种方法来实现特征检测，其中最简单的包括：识别功能和浏览器
使用普通的JavaScript（如BBC所使用）
>詹姆斯·爱德华兹
选择现代化的切割芥末可能不那么高效（因为它需要下载和客户处理），但是手动检测Flex-框支持并不是一项简单的任务。同样重要的是要注意，尽管ModernIzr 2版未检测到Flex包装，但版本3确实如此！该功能被标记为Flex线包装。
尽管存在使用Modernizr生成的文档根上附加的CSS类（例如：html.flexwrap）的CSS类，最好为每种体验提供单独的CSS文件以减少网站的下载尺寸。
BBC新闻开发人员是指两种类型的浏览器：
> 这个理由是完全有效的。但是，随着新功能的可用，该部门不一定那么清楚。例如，Flexbox在所有“ HTML5”浏览器中均未完全支持。>团队中的某人开始将他们称为“ HTML4浏览器”和“ HTML5浏览器”，我们发现它们更容易与非技术人员传达情感。
-> BBC响应新闻>
当您考虑2012年浏览器景观的气候时，>
>一种强大的方法是区分“遗产”和“现代”浏览器版本。此外，某些项目可能需要多个部门，其中可以识别中途（或“过渡”）浏览器。实现方法
首先创建以下文件：
index.html - 主HTML文件
> stylesheets/Modern.css - 现代浏览器的样式（媒体查询，包装flexbox）
>您还可能注意到脚本标签位于HTML页面的顶部。这是因为ModernIzr应该首次处理浏览器绘画之前的样式表并注入样式表。这减少了重新粉刷，并有助于避免闪烁的未风格的内容（FOUC）。但是请记住，大多数脚本标签都位于页面的底部。- > stylesheets/legacy.css - 旧式浏览器的样式（无媒体查询，没有flexbox）
- >脚本/依赖项。
- 这是我们的index.html文件的外观：
- 请注意，没有IE条件评论？只需清洁有效的HTML代码。而且，如果浏览器未启用JavaScript，则它将返回使用Legacy.css，无论其支持水平如何。
> >
我们的传统文件将包含以下内容：此实现包括一个Clearfix Hack和：用于包装的nth-Child伪级。它在大多数浏览器中起作用；但是，Internet Explorer 8需要Selectivizr或等效的解决方案才能使选择器正常工作。
接下来，我们的现代.css文件：
不要被此文件的大小推迟。这些评论使它看起来更大，但是这些评论使开发更容易理解每个部分的目标。
接下来，我们将编写依赖项的代码。 如前所述，我们需要生成一个版本的ModernIzr（版本3），该版本检测Flex-wrap属性的支持。在JavaScript文件的顶部包含代码。<span><span>.container</span> { </span><span>} </span> <span>/* clearfix */ </span><span><span>.container:after</span> { </span> <span>content: ""; </span> <span>display: table; </span> <span>clear: both; </span><span>} </span> <span><span>.cell</span> { </span> <span>width: 50%; </span> <span>float: left; </span><span>} </span> <span>/* wrapping */ </span><span><span>.cell:nth-child(<span>2n+1</span>)</span> { </span> <span>clear: left; </span><span>} </span> <span>/* for visiblity */ </span><span><span>.cell-1</span> { background-color: #000; color: #fff; } </span><span><span>.cell-2</span> { background-color: #666; color: #fff; } </span><span><span>.cell-3</span> { background-color: #ccc; color: #000; } </span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>登录后复制登录后复制>您可以选择通过增加Ismodern Boolean来增加现代体验的要求。例如：
> sass solutions<span><span>.container</span> { </span> <span>/* Internet Explorer 10 </span><span> */ </span> <span>display: -ms-flexbox; </span> <span>-ms-flex-wrap: wrap; </span> <span>/* Chrome 21-28 </span><span> * Safari 6.1+ </span><span> * Opera 15-16 </span><span> * iOS 7.0+ </span><span> */ </span> <span>display: -webkit-flex; </span> <span>-webkit-flex-wrap: wrap; </span> <span>/* Chrome 29+ </span><span> * Firefox 28+ </span><span> * Internet Explorer 11+ </span><span> * Opera 12.1 & 17+ </span><span> * Android 4.4+ </span><span> */ </span> <span>display: flex; </span> <span>flex-wrap: wrap; </span><span>} </span> <span><span>.cell</span> { </span> <span>-webkit-flex: 1 0 50%; </span> <span>-ms-flex: 1 0 50%; </span> <span>flex: 1 0 50%; </span><span>} </span> <span>/* for visiblity */ </span><span><span>.cell-1</span> { background-color: #000; color: #fff; } </span><span><span>.cell-2</span> { background-color: #666; color: #fff; } </span><span><span>.cell-3</span> { background-color: #ccc; color: #000; } </span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>登录后复制>您可以使用SASS抽象实现Flexbox的方法。这降低了CSS输出的大小，并使维护更易于：
渐进增强和浏览器测试
>了解Flexbox和CSS Floats之间的差异很重要。您的实现在每种经验中都不会完全相同，但是渐进式增强的概念意味着它不一定必须这样做。 例如，默认情况下，Flexbox将在同一行上拉伸所有单元格以具有相同的高度。因此，如果一个单元格长3行，相邻行长为10行，则背景将在两个单元格上延伸至10条线。 CSS Floats的后备将无法做到这一点，并且两个单元格的高度都不平均。
>在多个浏览器中测试布局仍然是一项要求，但是请记住，在JavaScript中将Ismodern的值迫使ISMODERN的值可以帮助任何浏览器中的遗留解决方案：>
结论
在本文中，我提供了使用功能检测的基础知识，可以在同一HTML代码库上使用两个不同的样式表。这是开始从CSS Floats开始升级过程并减少对IE条件评论的依赖的一种极为有效的方法。><span><span>.container</span> { </span><span>} </span> <span>/* clearfix */ </span><span><span>.container:after</span> { </span> <span>content: ""; </span> <span>display: table; </span> <span>clear: both; </span><span>} </span> <span><span>.cell</span> { </span> <span>width: 50%; </span> <span>float: left; </span><span>} </span> <span>/* wrapping */ </span><span><span>.cell:nth-child(<span>2n+1</span>)</span> { </span> <span>clear: left; </span><span>} </span> <span>/* for visiblity */ </span><span><span>.cell-1</span> { background-color: #000; color: #fff; } </span><span><span>.cell-2</span> { background-color: #666; color: #fff; } </span><span><span>.cell-3</span> { background-color: #ccc; color: #000; } </span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>登录后复制登录后复制>尽管有强烈的重点是检测对Flexbox的支持，但重要的是要注意，随着新功能是为浏览器开发的，这种切割芥末的方法可以适应和进化以满足未来的需求。
>一旦Internet Explorer 10在目标领域的浏览器市场份额中出现，您可能会抛弃Tweener语法并仅通过使用新的语法来提供精益代码。>所以现在您拥有所有理论，为什么不在下一个项目中熟悉Flexbox？
经常询问有关迁移到Flexbox和避免遗留JavaScript的问题
>迁移到flexbox的意义是什么？ Flexbox或Flexible Box布局是CSS3 Web布局模型，它允许在容器中自动安排的响应元素，具体取决于屏幕尺寸。这意味着您的网页布局可以轻松适应不同的屏幕尺寸，从而确保各种设备的无缝用户体验。它还简化了设计灵活，响应迅速的布局结构的过程，而无需使用浮点或定位。>如何为现代浏览器提供遗产JavaScript会影响我的网站的性能？服务Legacy JavaScript可能会极大地影响您的网站的性能。 Legacy JavaScript通常会肿，现代浏览器不需要的不必要的代码肿。由于浏览器需要下载，解析，编译和执行该网站，因此此额外的代码可以减慢您的网站。通过将现代JavaScript提供给现代浏览器，您可以改善网站的负载时间和整体性能。 >
>我如何避免将传统的JavaScript提供给现代浏览器？
>
避免将传统的JavaScript服务于现代浏览器，您可以使用模块/nomodule模式。这种模式使您可以创建JavaScript的两个单独的捆绑包 - 现代的“模块”捆绑包和遗产“ nomodule”捆绑包。理解“类型=”模块'属性的现代浏览器将下载现代捆绑包，而较旧的浏览器会忽略它并下载旧的捆绑包。
>使用FlexBox比传统布局方法有什么好处？Flexbox提供了比传统布局方法的几个优点。它允许灵活的布局结构，使设计响应式网站更容易。它还简化了容器中元素的对齐，分布和排序。使用Flexbox，您可以轻松地实现传统CSS很难的复杂布局和对齐方式。
>
>我如何确保在迁移到flexbox时的平稳过渡？>
迁移到flexbox可能是一个复杂的过程，特别是对于大型现有项目。在开始迁移之前，彻底了解Flexbox模型很重要。首先尝试简单的布局，逐渐移至更复杂的布局。使用逐步的方法，一次迁移一个组件并彻底测试每个更改。
>我可以使用哪些工具来检查我是否将传统的JavaScript服务于现代浏览器？ > Google Lighthouse，GTMetrix和WebPageTest等工具可以帮助您识别您是否在现代浏览器中为Legacy JavaScript提供服务。这些工具提供了详细的性能报告，突出显示了您网站性能可以提高的领域。
我可以将Flexbox与Legacy Browsers一起使用吗？
>虽然Flexbox是现代的布局模型，但它确实具有一定级别较旧浏览器的支持。但是，可能存在一些不一致和错误。建议使用诸如AutopRefixer之类的工具，该工具可以在CSS中添加必要的供应商前缀，从而确保与较旧的浏览器的兼容性。
>如何迁移到Flexbox ackloxbox ackly seo seo？
有效地迁移到flexbox上， SEO。响应迅速的快速加载网站提供了更好的用户体验，这是SEO的关键因素。此外，更快的加载速度的网站更有可能被搜索引擎爬行和索引。>>在迁移到flexbox时，有哪些共同挑战？>新的布局模型，处理浏览器不一致以及确保向后兼容。重要的是要在各种浏览器和设备中彻底测试您的网站，以确保始终如一的用户体验。 >如何了解有关Flexbox和Modern JavaScript的更多信息？ CSS-tricks，MDN Web文档和SitePoint等网站提供全面的指南和教程。此外，诸如Codecademy和FreecodeCamp之类的在线编码平台提供了有关这些主题的互动课程。
以上是通过切割芥末来迁移到Flexbox的详细内容。更多信息请关注PHP中文网其他相关文章！
