我尝试为 PrimeFaces (10.0.0) 设置 PrimeFlex (3.0.1)。我使用 PrimeFlex repo 的 dist 文件夹中提供的 css 文件。我还关注了 instructions在 PrimeFaces ShowCase 中给出，并在第一次测试中使用了几个 Flexbox 选项(如 FlexBox showcase 中给出的。
结果，我检索到的页面似乎未应用任何 PrimeFlex 类。但为什么呢？
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>PrimeFlex in Action</title>
<h:outputStylesheet name="css/primeflex.css" />
</h:head>
<h:body>
Hello from PrimeFlex
<h2>Direction</h2>
<div class="p-d-flex p-flex-column p-flex-md-row">
<div class="p-mb-2 p-mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div>
</div>
<h2>Flex Container</h2>
<div class="p-d-flex">Flex Container</div>
<div class="p-d-inline-flex">Inline Flex Container</div>
<h2>Responsive</h2>
Row direction for larger screens and column for smaller.
<div class="p-d-flex p-flex-column p-flex-md-row card">
<div class="p-mb-2 p-mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div>
</div>
</h:body>
</html>
CSS 文件似乎已被检索(查看 Chrome 开发人员工具的网络部分中显示的文件)，但不知何故无法为我的 Web 应用程序找到/处理它。
此外，我将 FLEX 激活添加到 web.xml 中，但没有任何效果:
<context-param>
<param-name>primefaces.FLEX</param-name>
<param-value>true</param-value>
</context-param>
还尝试使用 PrimeFlex 的整个 dist 文件夹，也没有改变任何东西。与将 h:outputStylesheet 移动到不同的位置和部分相同。
最佳答案
PrimeFaces 10、11 及其展示仍在使用 PrimeFlex 2。展示和文档在示例中使用的类是 PrimeFlex 2 的类。PrimeFlex 当前(2021 年 8 月)版本是 3。
如果您查看 PrimeFlex 2 到 3 迁移指南，您会发现大多数(如果不是全部)类别已发生变化。例如，p-text-left 变为 text-left。
我会使用 PrimeFlex 3(因为无论如何在某些时候都需要迁移)，并在复制展示中的示例时将迁移指南放在手边。
请注意，PrimeFaces 12 将使用 PrimeFlex 3 而不是 2。请参阅此问题:
如果您已经拥有使用 PrimeFlex 2 构建的应用程序，请注意可以使用 PrimeFlex 2 到 3 迁移工具:
关于jsf - PrimeFlex 未应用于 PrimeFaces，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68702516/