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

最新推荐文章于 2024-05-21 17:33:22 发布

＊且听风吟

最新推荐文章于 2024-05-21 17:33:22 发布

阅读量4.6k

点赞数 1

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

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

版权

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>