【CSS in Depth 2 精译_026】4.4 Flexbox 元素对齐、间距等细节处理(上)

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局
    • 4.1 Flexbox 布局原理(已完结)
      • 4.1.1 创建一个基础的 Flexbox 菜单
      • 4.1.2 添加内边距与间隔
    • 4.2 弹性子元素的大小(已完结)
      • 4.2.1 使用 flex-basis 属性
      • 4.2.2 使用 flex-grow 属性
      • 4.2.3 使用 flex-shrink 属性
      • 4.2.4 实际应用
    • 4.3 弹性布局的方向(已完结)
      • 4.3.1 变更弹性布局的方向
      • 4.3.2 登录表单的样式设计
    • 4.4 对齐、间距等细节处理 ✔️
      • 4.4.1 理解弹性容器的属性 ✔️
      • 4.4.2 理解弹性子元素的属性(精译中 ⏳)
      • 4.4.3 使用对齐属性(精译中 ⏳)
    • 4.5 本章小结(精译中 ⏳)

文章目录

    • [4.4 对齐、间距等细节处理](#4.4 对齐、间距等细节处理)
      • [4.4.1 理解弹性容器的属性](#4.4.1 理解弹性容器的属性)
        • [1 flex-wrap 属性](#1 flex-wrap 属性)
        • [2 flex-flow 属性](#2 flex-flow 属性)
        • [3 justify-content 属性](#3 justify-content 属性)
        • [4 align-content 属性](#4 align-content 属性)
        • [5 align-items 属性](#5 align-items 属性)

4.4 对齐、间距等细节处理

至此,我们已经对 Flexbox 最为核心的知识点有了全面深入的了解。不过前面提到过,还有很多设置项偶尔也能派上用场,它们大多与弹性子元素在弹性容器中的对齐方式或间距设置有关。还有一些设置用于控制换行,或者重新对子元素单独排序。

这些控制属性都罗列在了以下几张图表中:图 4.18 和图 4.19 列出了可在弹性容器上设置的所有属性;图 4.20 则列出了弹性子元素的所有属性。这些属性中很多也适用于下一章将要重点介绍的 网格布局(grid layout)

图 4.18 弹性容器的属性

图 4.19 弹性容器的属性(续)

图 4.20 弹性子元素的属性

通常情况下,创建一个弹性盒子需要用到前面介绍的以下方法:

  • 选定一个容器及其子元素,并给容器设置 display: flex
  • 如有必要,再对容器设置 gap 和/或 flex-direction 属性;
  • 必要时,为弹性子元素设置 flex 属性值来控制尺寸大小。

待元素大致摆放就位后,就可以按需设置其他 Flexbox 属性了。我建议先熟悉迄今为止学过的知识点,然后再继续本章后续内容,了解 Flexbox 提供的这些功能属性,等到用得着的时候再来记住它们,毕竟一口气记住所有这些以 align-*justify-* 开头的属性名绝非易事。什么时候用得上了,再回过头来参考参考就行了。剩下的大部分属性其实都比较简单。

4.4.1 理解弹性容器的属性

弹性容器上有好几个属性可以控制弹性子元素的布局,首先是前面 4.3 小节介绍过的 flex-direction,本节再来看看其他属性。

1 flex-wrap 属性

flex-wrap 属性可以让弹性子元素换到新的一行或多行显示,其属性值可以是 nowrap(初始值)、wrapwrap-reverse。启用换行后,子元素不再随指定的 flex-shrink 值收缩;相反,任何溢出弹性容器的子元素都将换行显示。

如果弹性布局的方向是 columncolumn-reverseflex-wrap 也能让弹性子元素换到下一列展示,只不过是在容器高度被限制的情况下才会发生;否则容器会纵向延展来包含溢出的子元素。

2 flex-flow 属性

flex-flow 属性是 flex-directionflex-wrap 的简写形式。例如 flex-flow: column wrap 指定弹性子元素从上到下排列,必要时换到下一列显示。

3 justify-content 属性

当弹性子元素未填满容器时,可以用 justify-content 属性来控制子元素沿主轴方向的间距。支持的属性值还有几个新关键字:flex-startflex-endcenterspace-betweenspace-around 以及 space-evenly。当值为默认的 flex-start 时,各子元素将从主轴的起始位置顺序排列。例如主轴方向通常为从左至右,起始位置就是左侧。如果不设置 gap 或外边距,子元素间就不存在间距。若值为 flex-end,则从主轴终点位置开始排列,center 则让子元素整体居中。

注意,这里的 startend 其实是让子元素靠左或靠右排列的逻辑值,它们取决于具体的书写模式,而与主轴方向无关;而 leftright 则是绝对值,始终按靠左和靠右排列执行,与书写模式及弹性布局方向无关。

均匀分布弹性子元素的方法共有三种,每种方法在首个子元素之前、末尾子元素之后提供不同的空间:space-between 令首尾子元素分别紧贴主轴的起点与终点,其余间隙均匀分布;space-around 则令首尾子元素的外围空间等于各子元素间均布间隙的一半;而 space-evenly 则是令首尾子元素的外围空间与子元素间的均布间隙相等。

间距(spacing)是在算出外边距与 flex-grow 值之后生效的。换言之,如果任意子元素的 flex-grow 属性不为 0、或者任何子元素在主轴方向的外边距值为 auto,那么属性 justify-content 就失效了。

4 align-content 属性

若启用换行(即 flex-wrap),align-content 属性就可以控制弹性容器内沿副轴方向各行之间的间距。支持的属性值有 flex-startflex-endcenterstretch(初始值)、space-between 以及 space-around。这些值对间距的处理类似上面的 justify-content

此外还有一个 place-content 属性,它是 align-contentjustify-content 的简写形式。

5 align-items 属性

控制子元素主轴方向对齐方式的是 justify-content 属性;而控制它们在副轴方向对齐的则是 align-items 属性,其初始值为 stretch,可以让子元素在水平布局时填满容器高度,而在垂直布局时填满容器宽度,因此可用于实现等高列。

其他的属性值能让弹性子元素保留自身的大小,而不必填充容器大小(类似 vertical-align 的概念)

  • flex-startflex-end:令子元素与副轴的开始和结束位置对齐(分别对应水平布局时的顶部与底部)。
  • startend:均为逻辑值,根据弹性容器的书写模式对各子元素进行对齐。
  • self-startself-end:也是逻辑值;也是根据各子元素的书写模式来设置对齐方式;但仅在某弹性子元素的书写模式与弹性容器各异时,二者才会与 startend 不同。
  • center:令子元素居中。
  • baseline:让元素根据每个弹性子元素的首行文本的基线对齐。基线(baseline)是文本底边所在的参考线。

当想让一个弹性子元素中大字号标题的基线与其他子元素中的小号字的文本基线对齐时,baseline 就能大展身手了。另外,还可以在此基础上加注 firstlast 字样,指定要对齐到文本的哪一行。例如,align-items: last baseline 就能让各弹性子元素按各自文本的最后一行对齐。

提示

justify-contentalign-items 属性的名称很容易混淆。我是参考文本处理器中的文本样式的含义来分辨它们的:可以"调整"(justify)文字,使其在水平方向的两端之间均匀分布;而 align-items 更像 vertical-align,能让行内文本在垂直方向上"对齐"(align)。

最后还有一个 place-items 属性,它是 align-itemsjustify-items 的简写形式。特别注意,justify-items 只能在第 5 章即将介绍的 网格布局(grid layout) 中使用,而在弹性容器中会被忽略。

相关推荐
清灵xmf41 分钟前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨1 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage2 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发2 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火3 小时前
Web Components 是什么
前端·web components
顾菁寒3 小时前
WEB第二次作业
前端·css·html