|
Post by account_disabled on Jan 28, 2024 5:13:26 GMT
在本教程中,我将引导您完成Trello看板屏幕基本布局的实现(请参阅此处的示例)。这是一个响应式、仅 CSS 的解决方案,并且仅开发布局的结构特征。 Pause Next Unmute Current Time Duration Fullscreen 为了进行预览,这里是最终结果的CodePen 演示。 Trello 屏幕 除了网格布局和Flexbox之外,该解决方案还采用计算和视口单元。为了使代码更具可读性和效率,我还将利用Sass 变量。 不提供后备方案,因此请确保在支持的浏览器中运行代码。话不多说,让我们深入研究,一一开发屏幕组件。 屏幕布局 Learn to Code with JavaScript Trello 看板的屏幕由应用栏、看板栏和包含卡片列表的部分组成。我将使用以下标记骨架构建此结构这种布局将通过 CSS 网格来实现。具体来说,是一个 3×1 的网格(即一列三行)。第一行用于应用程序栏,第二行用于面板栏,第三行用于元素.lists。 前两行各有固定高度,而第三行将跨越剩余的可用视口高度 视口单位确保.ui容器始终与浏览器视口一样高。 网格格式化上下文被分配给容器,并且上面指定的网格行和列被定义。更准确地说,只定义了行,因为不需要声明唯一的列。行的大小是通过几个用于条形高度 WhatsApp 号码数据 的 Sass 变量和单位来完成的,fr以使元素的高度 .lists跨越可用视口高度的其余部分。 卡列表部分 如前所述,屏幕网格的第三行包含卡片列表的容器。这是其标记的概要我使用全视口宽度 Flexbox 单行行容器来格式化列表为该属性分配 auto 值overflow-x会告诉浏览器在列表不适合视口提供的宽度时在屏幕底部显示水平滚动条。 简写flex属性用于弹性项目以使列表变得刚性。auto 值flex-basis(用于简写)指示布局引擎从.list元素的 width 属性中读取大小,而 0 值则flex-grow防止flex-shrink更改此宽度。 接下来,我需要在列表之间添加水平分隔。 如果列表上设置了右边距,则不会渲染水平溢出的板中最后一个列表之后的边距。为了解决这个问题,列表由左边距分隔,最后一个列表和右视口边缘之间的空间通过::after向每个元素添加伪元素来处理.lists。必须覆盖默认值flex-shrink: 1,否则伪元素会“吸收”所有负空间并消失。 请注意,在 Firefox < 54 上,需要显式启用width: 100%以确保正确的布局呈现。.lists 卡牌列表 每个卡片列表由标题栏、卡片序列和页脚栏组成。以下 HTML 片段捕获了此结构 这里的关键任务是如何管理列表的高度。页眉和页脚具有固定高度(不一定相等)。然后有数量可变的卡片,每张卡片的内容量也不同。因此,随着卡片的添加或删除,列表会垂直增长和缩小。 Learn to Code with JavaScript 但高度不能无限增长,它需要有一个取决于元素高度的上限.lists。一旦达到此限制,我希望出现一个垂直滚动条,以允许访问溢出列表的卡片。 max-height这听起来像是和地产的工作overflow。
|
|