菜单 搜索
首页 前端知识 css flex布局 —— 项目属性 align-self

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

2024-04-15 21:04:00 前端知识 前端哥 738 835 我要收藏

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>
 
复制

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

baseline

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

stretch

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/5026.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！