align-content 不生效?区分align-content和align-items

前言

今天在写组件,使用flex属性来定位元素时,遇到了怎么改align-content都无法实现内容居中的效果,于是参考了W3C的有关文档,理解了为何要设置align-itemsalign-content两个属性来实现对子元素的定位。 以下是为了区分这两个属性而做的简单应用场景示例笔记。

align-items 与 align-content 的应用场景

简单区分

两个属性都不作用于定义了该属性的元素本身,一般将其定义为容器属性,即父元素的属性。
同样的,他们都作用于父元素下的子元素,只不过align-item会根据父元素的空间去为父元素下的每一行元素定位。而align-content则是将父元素下的所有子元素作为一个整体,再根据父元素的空间去定位。
这么讲很绕,不如直接看示例与结果。
我们只讨论父元素均能包含所有子元素的情况,这用来区分两个属性的差别,已经足够了。

align-items 实例

align-items 定位时,作用于容器内的每一行,其默认值为 stretch

单行

当容器内只有一行时,例如 flex-wrap: nowrap 的情况

stretch 模式下,会自动将单行内未定义高度的元素拉升至父元素高度

<div
  style="
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100px;
    color: #409eff;
    background: #d9ecff;
    margin: 0;
    box-shadow: 0 0 0 10px #79bbff;
  "
>
  <span style="display: flex; background: #a0cfff">Test1</span>
  <p style="display: flex; margin: 0; background: #a0cfff">Test1</p>
  <span style="display: flex; background: #a0cfff; height: 50px"
    >Test2</span
  >
  <p style="display: flex; margin: 0; background: #a0cfff; height: 50px">
    Test2
  </p>
</div>
Test1

Test1

Test2

Test2

center 模式下,行内元素则不会自动拉升高度,此时若行内元素小于父元素高度,即元素与父元素边界存在距离时,则会自动补全空白并按轴线居中。center 其实就是让元素位于补全的空白中间。

<div
  style="
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items:center;
    height: 100px;
    color: #409eff;
    background: #d9ecff;
    margin: 0;
    box-shadow: 0 0 0 10px #79bbff;
  "
>
  <span style="display: flex; background: #a0cfff">Test1</span>
  <p style="display: flex; margin: 0; background: #a0cfff">Test1</p>
  <span style="display: flex; background: #a0cfff; height: 50px"
    >Test2</span
  >
  <p style="display: flex; margin: 0; background: #a0cfff; height: 50px">
    Test2
  </p>
</div>
Test1

Test1

Test2

Test2

多行

align-items 用于多行定位时,由于其作用对象是容器内的每一行,此时若align-items:center,则父元素会先按照行数均分高度,然后让子元素在各自的均分高度内居中

<div
  style="
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: 120px;
    color: #409eff;
    background: #d9ecff;
    margin: 0;
    box-shadow: 0 0 0 10px #79bbff;
  "
>
  <p
    style="
      display: flex;
      width: 100%;
      height: 20px;
      background: #a0cfff;
      margin: 0;
    "
  >
    line 1
  </p>
  <p
    style="
      display: flex;
      width: 100%;
      height: 20px;
      background: #a0cfff;
      margin: 0;
    "
  >
    line 2
  </p>
  <p
    style="
      display: flex;
      width: 100%;
      height: 20px;
      background: #a0cfff;
      margin: 0;
    "
  >
    line 3
  </p>
</div>

line 1

line 2

line 3

align-content 实例

align-content 定位时,会将容器内的所有子元素视为一个整体,然后再定位他们

<div
  style="
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    height: 120px;
    color: #409eff;
    background: #d9ecff;
    margin: 0;
    box-shadow: 0 0 0 10px #79bbff;
  "
>
  <p
    style="
      display: flex;
      width: 100%;
      height: 20px;
      background: #a0cfff;
      margin: 0;
    "
  >
    line 1
  </p>
  <p
    style="
      display: flex;
      width: 100%;
      height: 20px;
      background: #a0cfff;
      margin: 0;
    "
  >
    line 2
  </p>
  <p
    style="
      display: flex;
      width: 100%;
      height: 20px;
      background: #a0cfff;
      margin: 0;
    "
  >
    line 3
  </p>
</div>

line 1

line 2

line 3

可以看到所有子元素抱团了

总结

align-items 定位每一行
align-content 定位所有子元素构成的整体

参考:CSS Box Alignment Module Level 3 (w3.org)

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
颜文字
Emoji
小恐龙
花!
滑稽大佬
演奏
程序员专属
上一篇
下一篇