flex嵌套,以及:nth-of-type(3)伪类使用

原创于 2024-11-03 13:19:00 发布 · 370 阅读

CC 4.0 BY-SA版权

文章标签：

弹性盒子也能创建一些颇为复杂的布局。设置一个元素为 flex 项，那么他同样成为一个 flex 容器，它的孩子（直接子节点）也表现为弹性盒子。看一下复杂弹性盒子.html（在线浏览）。

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

选择器 article:nth-of-type(3)：
- 这个选择器用于选择文档中第三个<article>元素。:nth-of-type(n)伪类选择器用于选择同类型元素中的第n个元素。
- 例如，如果有多个<article>元素，这个选择器会应用样式到第三个<article>元素。
flex: 3 200px;：
- 这是一个简写属性，用于设置弹性容器内项目的弹性增长因子、缩小因子和基础大小。
- 3 是增长因子，表示如果有额外的空间，这个项目将比其他项目多增长3倍。
- 200px 是基础大小，表示项目在没有额外空间或需要缩小时的基础尺寸。
display: flex;：
- 将<article>元素设置为弹性容器，使其子元素成为弹性项目。
- 弹性布局（Flexbox）是一种一维布局模型，允许更高效地排列和对齐容器中的项目。
flex-flow: column;：
- 这是flex-direction和flex-wrap的简写属性。
- column 指定弹性项目将垂直排列（从上到下）。

假设有以下HTML结构：

<article>First Article</article>
<article>Second Article</article>
<article>Third Article</article>
<article>Fourth Article</article>

应用上述CSS后，第三个<article>元素将会被设置为弹性容器，并且其子元素将垂直排列。