📌  相关文章
📜  HTML | DOM 样式 alignItems 属性(1)

📅  最后修改于: 2023-12-03 15:31:13.391000             🧑  作者: Mango

HTML | DOM 样式 alignItems 属性

简介

alignItems 属性规定了在交叉轴上如何对齐元素。

语法
element.style.alignItems="stretch|center|flex-start|flex-end|baseline|initial|inherit"
取值
stretch

元素被展开以填满交叉轴空间。

center

元素在交叉轴上居中对齐。

flex-start

元素在交叉轴上的起始位置对齐。

flex-end

元素在交叉轴上的结束位置对齐。

baseline

元素在交叉轴上以其基线对齐。(仅适用于行内元素)

initial

将该属性设为其默认值。

inherit

继承父元素的 align-items 值。

实例

以下代码展示了如何使用 alignItems 属性：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .container {
        display: flex;
        height: 200px;
        width: 300px;
        background-color: lightpink;
        align-items: center;
      }

      .item {
        height: 100px;
        width: 100px;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

效果如下：

flexbox-alignitems-example