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

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>
            
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值