CSS 基础 - 结构

记得我在我的文章中提到的 HTML 基础 - 结构 最高级的结构将由 CSS 处理的文章？嗯，就是这样。

Photo by 设计公司 on 不飞溅

正如我之前提到的，HTML 的 'table' 元素是仅在 HTML 中获得一致的垂直和水平结构的唯一方法，但它非常有限。就像表格有行和列一样，CSS 让我们能够使用自己的行和列来设置元素的样式。输入 Grid 和 Flexbox。

网格

网格的行为类似于 HTML 的“表格”，但具有更高级的功能。它可用于合并“单元格”（我将指的是网格元素，就像它们是未来表格的一部分，仅供参考）、定义大小、处理响应式用例等等。

关于网格，首先要记住的也是最重要的一点是，因为它是一个 CSS 命令，所以它必须应用于 HTML 元素。这不会神奇地发生，所以请参阅我的文章，了解 CSS 的工作原理以及跳过样式后如何声明样式。

我们首先通过应用'display：grid;'来定义网格样式到我们的“网格容器”。容器当然可以随心所欲地命名，但它始终是我们的容器，而里面的元素始终是我们的“网格项”。它应该看起来像这样：

.grid-container {

显示：网格；

}

这个简单的声明告诉浏览器将容器内的所有元素格式化为具有默认样式的网格形式。从这里我们可以定义我们的容器应该是什么样子，字体大小和样式等，但最重要的是，我们可以通过定义有多少列和行来指定总网格的大小。

我们通过声明样式“grid-template-columns”和“grid-template-rows”来做到这一点。您在此声明之后放置的每个单独的值都将代表一列/行及其大小（分别为宽度或高度）。以下 -

网格模板列：80px 100px 20px；

将表示一个具有三列的网格，它们各自的宽度从左到右排列。当然，同样的过程也适用于行。

一旦网格容器有了合适的样式，我们就应该定义网格项样式。与我们的容器一样，这些项目的定义类名可以是任何东西。样式可以像应用到任何 div 或其他 HTML 元素一样应用，以更改背景颜色、字体大小或颜色等。

我们通过设置网格项本身的样式来定义网格中元素的大小。通过使用样式声明“grid-column”或“grid-row”，我们可以定义项目的开始和结束位置。例如 -

.grid-item {

网格列：1 / 3；

}

将导致我们的网格项跨越前两列的宽度。这可能会令人困惑，因为从表面上看，我们似乎在告诉网格项在第 3 列结束，所以请记住，这里等式的“列结束”或“行结束”一半是指我们的列或行 停止之前。

这需要很多时间来适应，所以需要一些时间来练习并感受它们。

网格还可以使用“间隙”样式定义元素之间的间隙大小。这适用于行和列之间的间隙，尽管我们可以分别使用 'row-gap' 和 'column-gap' 指定行或列。

弹性盒

Flexbox 的工作原理很像网格，但它是一维的，与网格的两轴方法不同。这种差异在很大程度上暴露了两者的不同用例——如果你有一堆想要在两个方向上构建的元素，请使用网格，否则使用 flexbox 运行你的单向列表。

像这样定义一个弹性容器 -

.flex 容器 {

显示：弯曲；

}

您应该立即注意到里面的元素，现在是“弹性项目”，以水平方式很好地对齐。这是 flexbox 的默认一维布局，但使用 'flex-direction' 样式，您可以在水平和垂直之间改变方向。

我们还可以定义当屏幕/外部容器大小变得过于严格时，flexbox 应该如何操作。 'flex-wrap' 属性定义了 flexbox 中的项目在收缩时是否应该换行。

'flex-flow' 是 'flex-direction' 和 'flex-wrap' 的简写。

弹性物品也有自己独特的风格——

通过设置 'order' 属性的值，可以给弹性项目在弹性盒的层次结构中的特定位置。

“flex”属性是三个重要的大小确定属性的简写——“flex-basis”、“flex-grow”和“flex-shrink”。他们分别定义了他们定义的项目的起始大小、比较增长率和比较收缩率。

最后，我们有'align-self'。这会覆盖“align-items”所做的任何对齐，以便在需要时单独为自身提供特定的“align-items”样式对齐。 “self”的值与“items”相同。

响应式

Flexbox 非常擅长简化响应式格式化。使用媒体查询（稍后将详细介绍响应式设计），我们可以根据需要更改 flex 项目的 flex 方向或 flex-basis，根据屏幕大小进行更改。查看示例 这里 .

共享样式

Grid 和 Flexbox 的共同目标是以一种比原生 HTML 所提供的更好、更用户友好的方式来构建 HTML。因此，两者之间共享某些样式。

结盟

最重要和最常用的是对齐样式。其中包括“justify-content”、“align-items”和“align-content”。这些定义了容器样式中内容的默认对齐方式。

' 证明内容 ' 在其容器内水平对齐内容。

' 对齐项目 ' 垂直对齐内容。

' 对齐内容 ' 改变了 'flex-wrap' 的定义方式。它的工作原理与“对齐项目”相同，但对齐 弯曲线 而不是物品本身。那么它必须有不止一条线才能做任何事情。

上述三个的值几乎都相同，唯一的区别在于函数本身。 flex-start、center、space-evenly 等都在三者之间共享。我在每个属性名称中添加了链接到每个可以使用的所有值的示例。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1772/09573017