css flex布局 —— 项目属性 align-self

最新推荐文章于 2025-04-07 00:23:14 发布

＊且听风吟

最新推荐文章于 2025-04-07 00:23:14 发布

阅读量4.8k

点赞数 1

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/HH18700418030/article/details/126996744

版权

CSS 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了CSS flex布局中align-self属性的用法，包括auto、flex-start、flex-end、center、baseline和stretch六种值的效果展示，用于控制子元素在纵轴上的单独对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

align-self属性定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

语法

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了 auto，其他都与 align-items 属性完全一致。

auto

<!DOCTYPE html>
<html>
<head>
  <style> 
    .container {
      width: 350px;
      height: 350px;
      border: 1px solid #c3c3c3;
      /* 定义flex容器 */
      display: flex;
      display: -webkit-flex; /* Safari */
      /*
        设置容器内部元素的排列方向
        row: 定义排列方向 从左到右
        row-reverse: 从右到左
        column: 从上到下
        column-reverse: 从下到上    
        */
        flex-direction: row;
      /*
           设置容器中元素 在交叉轴上的对齐方式
           stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
           flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
           flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
           center: 居中对齐
           baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
           */
           align-items: baseline;
         }

         .container div { width:50px; }
         .container div:nth-of-type(1) {background-color:coral;height:50px;}
         .container div:nth-of-type(2) {background-color:lightblue;height:250px;}
         .container div:nth-of-type(3) {background-color:khaki;height:150px;}
         .container div:nth-of-type(4) {background-color:pink;height:50px;

       /*
            重写容器中元素在交叉轴上的对齐方式
            auto: 默认， 表示继承父级元素的 align-items属性
            stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
            flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
            flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
            center: 居中对齐
            baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
            */
            align-self: auto;
          }
            .container div:nth-of-type(5) {background-color:lightgrey;height:100px;}

          </style>
        </head>
        <body>

          <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
          </div>

          <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
          <p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p>

        </body>
        </html>

页面效果：
在这里插入图片描述

flex-start

<!DOCTYPE html>
<html>
<head>
  <style> 
    .container {
      width: 350px;
      height: 350px;
      border: 1px solid #c3c3c3;
      /* 定义flex容器 */
      display: flex;
      display: -webkit-flex; /* Safari */
      /*
        设置容器内部元素的排列方向
        row: 定义排列方向 从左到右
        row-reverse: 从右到左
        column: 从上到下
        column-reverse: 从下到上    
        */
        flex-direction: row;
      /*
           设置容器中元素 在交叉轴上的对齐方式
           stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
           flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
           flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
           center: 居中对齐
           baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
           */
           align-items: baseline;
         }

         .container div { width:50px; }
         .container div:nth-of-type(1) {background-color:coral;height:50px;}
         .container div:nth-of-type(2) {background-color:lightblue;height:250px;}
         .container div:nth-of-type(3) {background-color:khaki;height:150px;}
         .container div:nth-of-type(4) {background-color:pink;height:50px;

       /*
            重写容器中元素在交叉轴上的对齐方式
            auto: 默认， 表示继承父级元素的 align-items属性
            stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
            flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
            flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
            center: 居中对齐
            baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
            */
            align-self: flex-start;
          }
            .container div:nth-of-type(5) {background-color:lightgrey;height:100px;}

          </style>
        </head>
        <body>

          <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
          </div>

          <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
          <p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p>

        </body>
        </html>

页面效果：
在这里插入图片描述

flex-end

<!DOCTYPE html>
<html>
<head>
  <style> 
    .container {
      width: 350px;
      height: 350px;
      border: 1px solid #c3c3c3;
      /* 定义flex容器 */
      display: flex;
      display: -webkit-flex; /* Safari */
      /*
        设置容器内部元素的排列方向
        row: 定义排列方向 从左到右
        row-reverse: 从右到左
        column: 从上到下
        column-reverse: 从下到上    
        */
        flex-direction: row;
      /*
           设置容器中元素 在交叉轴上的对齐方式
           stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
           flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
           flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
           center: 居中对齐
           baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
           */
           align-items: baseline;
         }

         .container div { width:50px; }
         .container div:nth-of-type(1) {background-color:coral;height:50px;}
         .container div:nth-of-type(2) {background-color:lightblue;height:250px;}
         .container div:nth-of-type(3) {background-color:khaki;height:150px;}
         .container div:nth-of-type(4) {background-color:pink;height:50px;

       /*
            重写容器中元素在交叉轴上的对齐方式
            auto: 默认， 表示继承父级元素的 align-items属性
            stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
            flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
            flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
            center: 居中对齐
            baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
            */
            align-self: flex-end;
          }
            .container div:nth-of-type(5) {background-color:lightgrey;height:100px;}

          </style>
        </head>
        <body>

          <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
          </div>

          <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
          <p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p>

        </body>
        </html>

页面效果：
在这里插入图片描述

center

<!DOCTYPE html>
<html>
<head>
  <style> 
    .container {
      width: 350px;
      height: 350px;
      border: 1px solid #c3c3c3;
      /* 定义flex容器 */
      display: flex;
      display: -webkit-flex; /* Safari */
      /*
        设置容器内部元素的排列方向
        row: 定义排列方向 从左到右
        row-reverse: 从右到左
        column: 从上到下
        column-reverse: 从下到上    
        */
        flex-direction: row;
      /*
           设置容器中元素 在交叉轴上的对齐方式
           stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
           flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
           flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
           center: 居中对齐
           baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
           */
           align-items: baseline;
         }

         .container div { width:50px; }
         .container div:nth-of-type(1) {background-color:coral;height:50px;}
         .container div:nth-of-type(2) {background-color:lightblue;height:250px;}
         .container div:nth-of-type(3) {background-color:khaki;height:150px;}
         .container div:nth-of-type(4) {background-color:pink;height:50px;

       /*
            重写容器中元素在交叉轴上的对齐方式
            auto: 默认， 表示继承父级元素的 align-items属性
            stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
            flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
            flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
            center: 居中对齐
            baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
            */
            align-self: center;
          }
            .container div:nth-of-type(5) {background-color:lightgrey;height:100px;}

          </style>
        </head>
        <body>

          <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
          </div>

          <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
          <p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p>

        </body>
        </html>