用CSS网格和Flexbox构建特雷洛布局

钥匙要点

• >教程演示了如何使用CSS网格和Flexbox实现Trello板的基本布局，从而提供了响应迅速的仅CSS的解决方案。布局由应用程序栏，板栏和包含卡列表的部分组成。
>教程说明了如何使用3×1网格构建布局结构，前两个行具有固定高度，第三排跨越了可用的视口高度。它还使用视口单元来确保容器始终与浏览器的视口一样高。
>教程显示了如何使用完整的视口宽度Flexbox单线行容器来格式化卡列表。它还演示了如何使用Overflow-X属性在列表不符合视口宽度时在屏幕底部显示水平滚动条。>
• >教程建议将最大高度约束应用于内部无序列表以管理列表的高度。它还说明了如何使列表与父容器一样高，以及仅在需要时使用溢出Y属性来显示scrollbar。
在本教程中，我将引导您完成Trello板屏幕的基本布局的实现（请参见此处的示例）。这是一个响应迅速的，仅CSS的解决方案，只有布局的结构特征才能开发出来。
• 对于预览，这是最终结果的编码epen演示。
除了网格布局和Flexbox外，该解决方案还采用了计算和视口单元。为了使代码更加可读性和高效，我还将利用SASS变量。

>没有提供后备，因此请确保在支持浏览器中运行代码。毫无疑问，让我们深入研究，开发屏幕组件一个一个。

屏幕布局

> Trello板的屏幕由应用程序栏，一个板栏和包含卡列表的部分组成。我将使用以下标记骨架来构建此结构：

将通过CSS网格实现此布局。具体而言，一个3×1网格（即一列和三行）。第一行将用于应用程序栏，第二行是董事会栏，第三行是.LAM元素。

前两行的高度固定，而第三行将跨越可用的视口高度的其余部分：

视口单元确保.UI容器始终像浏览器的视口一样高。

>将网格格式上下文分配给容器，并定义了上面指定的网格行和列。更确切地说，仅由于没有需要声明唯一的列而定义行。行的尺寸是用杆高度和FR单元的几个SASS变量完成的，以使列表元素的高度跨越可用的视口高。

卡列表部分

>

>如前所述，屏幕网格的第三行托管卡列表的容器。这是其标记的概述：

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

我正在使用一个完整的视口宽度flexbox单线行容器来格式化列表：

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

>将自动值分配给Overflow-X属性会告诉浏览器在列表不适合视图时列表时，在屏幕底部显示水平滚动条。>>>>

> flex速记属性在flex项目上使用，以使列表

刚性

。 Flex-Basis的自动值（用于速记中）指示布局引擎从.LIST元素的宽度属性中读取大小，而flex Grow和Flex-shrink的零值则阻止了此宽度的改变。 > 接下来，我需要在列表之间添加水平分离。如果设置了列表上的正确边距，则不会渲染具有水平溢出的板上的最后一个列表之后的边距。为了解决此问题，列表由左边边缘分开，最后列表和右视口缘之间的空间通过在每个.LIST元素中添加伪元素后处理:: ::。默认的flex shrink：1必须被覆盖，否则伪元素“吸收”所有负空间，并且消失了。

请注意，在Firefox 卡列表

>每个卡列表由标头栏，一系列卡和页脚栏组成。以下HTML摘要捕获了以下结构：

>至关重要的任务是如何管理列表的高度。标题和页脚具有固定高度（不一定相等）。然后有可变数量的卡，每张卡都有可变数量的内容。因此，列表在添加或删除时垂直增长和收缩。

>

>但是高度不能无限期地增长，它需要具有取决于.LIST元件的高度的上限。一旦达到此限制，我希望出现一个垂直滚动条，以允许访问溢出列表的卡。

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

这听起来像是最大高点和溢出属性的工作。但是，如果将这些属性应用于根容器.LINS，则一旦列表达到其最大高度，将出现滚动栏，其中包括所有元素，标头和页脚。以下图显示了左侧错误的侧边栏，右侧显示了正确的侧边栏：

>因此，让我们将最大高度约束应用于内部

。应该使用哪个值？标题和页脚的高度必须从列表的高度列表母容器的高度（.LIST）中减去：

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

，但是有一个问题。百分比值并不是指列表，而是指

元素的父母。清单，并且该元素没有确定的高度，因此该百分比无法解决。可以通过使.LIST等清单的列表来解决：

>

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

>以这种方式，因为.LIST总是像列表一样高，无论其内容如何，​​其背景色属性不能用于列表背景颜色，但是可以使用其孩子（标题，页脚，页板，卡片）为此目的。

>对列表高度的最后调整是必要的，以说明列表底部和视口底部边缘之间的一些空间（$ abap）：

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

>另外的$ scrollbar-thickness量被减去，以防止列表触摸.LIST元素的水平滚动条。实际上，在Chrome上，此滚动条在。清单框中。也就是说，100％的值是指。清单的高度，包括滚动栏。

>

>在Firefox上，滚动栏是“附加”。清单高度之外，即100％是指不包括滚动条的名单的高度。因此，这是不需要的。结果，当可见滚动栏时，在Firefox上，列表底部边框之间的视觉空间已达到其最大高度，滚动栏的顶部稍大。

这是此组件的相关CSS规则：

如前所述，列表背景颜色是通过将$ list-bg彩色值分配给每个名单元素的孩子的背景色属性来渲染的。溢出Y仅在需要时显示scrollbar。最后，将一些简单的样式添加到标题和页脚中。

>

<span>.lists {
</span><span>  <span>display: flex;</span>
</span><span>  <span>overflow-x: auto;</span>
</span>  <span>> * {
</span><span>    <span>flex: 0 0 auto; // 'rigid' lists</span>
</span><span>    <span>margin-left: $gap;</span>
</span>  <span>}
</span><span>  <span>&::after {</span>
</span><span>    <span>content: '';</span>
</span><span>    <span>flex: 0 0 $gap;</span>
</span>  <span>}
</span><span>}</span>

修饰触摸

单卡的HTML简单由列表项组成：>

或，如果卡具有封面图像：

<span><span><span><div</span> class<span>="list"</span>></span>
</span>  <span><span><span><header</span>></span>List header<span><span></header</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>    ...
    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span>  <span><span><span><footer</span>></span>Add a card...<span><span></footer</span>></span>
</span><span><span><span></div</span>></span></span>

这是相关的CSS：

<span>ul {
</span><span>  <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>}</span>

设置了背景，填充和底部边缘后，就可以准备好封面图像布局。图像宽度必须从左侧填充边缘到右填充边缘的整个卡范围：

然后，分配负边缘以水平和垂直对齐图像：

<span><span>.list</span> {
</span>  <span>height: 100%;
</span><span>}</span>

第三个正保证金值照顾封面图像和卡文本之间的空间。

>最后，我在占据屏幕布局第一行的两个条上添加了一个flex格式上下文。但是他们只是素描。通过扩展演示，可以随意建立自己的实施。

结论

这只是完成此设计的一种可能方法，看到其他方法很有趣。另外，最终确定布局将很不错，例如完成两个屏幕栏。

>另一个潜在的增强可能是对卡列表的自定义滚动条的实现。

因此，请随时在下面的讨论中分叉演示并发布链接。

经常询问的问题（常见问题解答）有关使用CSS网格和Flexbox

构建Trello布局

>如何使用CSS网格和Flexbox创建类似Trello的布局？

>使用CSS网格和Flexbox创建类似Trello的布局，涉及多个步骤。首先，您需要为布局创建基本的HTML结构。这包括为您的董事会和单个容器创建列表和卡的容器。接下来，您将CSS网格应用于板容器以创建网格布局。然后，您可以使用FlexBox在其各自的容器中排列列表和卡。这使您可以创建一个响应迅速，灵活的布局，可以容纳任何数量的列表和卡片。

>

>使用CSS Grid和Flexbox创建类似Trello的布局有什么好处？ CSS网格和Flexbox为创建类似trello的布局提供了一些好处。它们允许您创建一个响应迅速的布局，该布局可以适应不同的屏幕尺寸和方向。他们还提供了一个灵活的布局系统，可以容纳任何数量的列表和卡。此外，它们提供了强大的对齐和分配控件，使创建干净，有条理的布局变得容易。

我可以使用CSS网格和Flexbox创建其他类型的布局吗？网格和Flexbox是通用的布局系统，可用于创建各种布局。它们可以单独或组合使用以创建复杂的响应式布局。无论您是创建简单的两列布局还是复杂的网格布局，CSS网格和Flexbox都可以提供所需的工具。

>

如何使用CSS网格和Flexbox使我的类似Trello的布局响应？

>

>使用CSS网格和Flexbox响应类似Trello的布局涉及使用媒体查询根据屏幕尺寸调整布局。您可以使用媒体查询来更改网格列的数量，也可以调整列表和卡片的flex属性。这允许您的布局适应不同的屏幕尺寸和方向，从而确保在所有设备上都具有一致的用户体验。

如何在类似trello的布局中添加互动率？

使用JavaScript可以实现类似trello的布局。您可以使用JavaScript将拖放功能添加到卡中，从而使用户可以在列表之间移动卡。您也可以使用JavaScript添加其他交互式功能，例如添加新卡或列表的功能。

>使用CSS网格和Flexbox创建类似trello的布局有任何限制吗？

>

>，而CSS网格和Flexbox是强大的布局系统，它们确实有一些限制。例如，在较旧的浏览器中，它们可能不会得到完全支持。此外，尽管它们提供了灵活的布局系统，但它们可能不适合所有类型的布局。重要的是要了解这些限制并在必要时考虑替代解决方案。

>我如何自定义类似trello的布局的外观？

>自定义可以完成类似trello的布局的外观使用CSS。您可以使用CSS更改布局的颜色，字体和其他视觉元素。您还可以使用CSS添加效果，例如阴影或过渡，以增强用户体验。

我可以使用CSS网格和Flexbox创建类似Trello的布局而没有任何先前的经验？ 🎜>虽然CSS网格和Flexbox是相对高级的CSS功能，但可以通过一些研究和实践来学习。在线有许多资源，包括教程和指南，可以帮助您学习如何使用这些功能。有了一些时间和精力，即使您是初学者，您也可以使用CSS网格和Flexbox创建类似Trello的布局。

>

>如何使用类似trello的布局来解决问题？ >>使用浏览器中的开发人员工具可以完成类似Trello的布局的故障排除问题。这些工具使您可以检查HTML和CSS，从而更容易识别和解决问题。您还可以使用在线论坛或社区（例如堆栈溢出）来提出问题并从其他开发人员那里获得帮助。

>

>如何优化类似trello的布局以进行性能？性能的类似Trello的布局可能涉及多种策略。这包括使用高效的CSS选择器最大程度地减少CSS和JavaScript，并优化图像。您还可以使用诸如Google Lighthouse之类的性能工具来分析您的布局并确定改进的区域。

以上是用CSS网格和Flexbox构建特雷洛布局的详细内容。更多信息请关注PHP中文网其他相关文章！