Flex 布局里的 align-self 属性

汪子熙

已于 2024-10-23 23:00:47 修改

阅读量2.4k

点赞数

分类专栏：前端开发相关文章标签： css

于 2021-03-18 16:25:09 首次发布

本文链接：https://blog.csdn.net/i042416/article/details/114983230

版权

前端开发相关专栏收录该内容

884 篇文章

订阅专栏

https://css-tricks.com/almanac/properties/a/align-self/

It makes possible to override the align-items value for specific flex items.

允许flex item重载flex container里定义的align-items的值。

语法：

align-self: auto | flex-start | flex-end | center | baseline | stretch

.flex-item {
  align-self: flex-end;
}

这五种属性对应的效果如下：

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

汪子熙

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

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

且听风吟的博客

12-14

4886

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

0077 flex：flex-direction、justify-content、flex-wrap、align-content、align-items、flex-flow、align-self、or

maopolunzi的博客

12-28

816

移动web开发——flex布局 1.传统布局和flex布局对比 1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局 1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex 2. fl...

参与评论您还未登录，请先登录后发表或查看评论

flex弹性布局教程-13项目属性align-self

晴空闲云

09-29

7087

本篇介绍了项目属性 align-self，和 align-items 类似。align-items设置在容器上，作用所有的项目。align-self 设置在项目上，作用单个项目。阅读时间约5~10分钟。

深入理解CSS对齐属性：align-items, align-self, justify-items, justify-self

最新发布

一萧烟雨任平生

04-07

2632

属性作用对象方向适用布局覆盖关系容器垂直Flex/Grid被align-self覆盖align-self子项垂直Flex/Grid覆盖容器水平Grid被覆盖子项水平Grid覆盖记忆口诀想调垂直用align，想调水平用justify容器设置用-items，单个调整用-selfGrid布局全支持，Flex缺更精准地控制布局中的元素位置减少不必要的嵌套和冗余代码创建更灵活、响应式的设计容器定义全局规则子项只在必要时覆盖保持代码的可预测性和可维护性。

【移动端网页布局】flex 弹性布局子项目属性 ② ( align-self 子项目属性 - 设置指定子项目元素侧轴排列方式 | 代码示例 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

05-13

1578

一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式二、代码示例 - 设置指定子项目的侧轴排列方式

flex布局---容器内部，align-self属性

weixin_45128912的博客

07-18

1182

flex布局---容器内部，align-self属性

flex布局，align-self

weixin_30856725的博客

07-03

296

flex布局，align-self 1 <template> 2 <view class="container"> 3 <view class="green txt" style="height: 200upx;font-size: 20upx;"> 4 A 5 </v...

【快应用】align-self属性设置不生效案例

华为开发者联盟

11-09

924

华为ide中在text和image组件的style标签中使用align-self 属性，出现报错提示，'' does not support 'align-self' style和'' does not support 'align-self' style，该如何解决？这个是华为与联盟ide的一个差异导致的，实际华为是支持这个属性的，只是不能写在style标签中，需要写在class伪类里才是可以的。欲了解更多更全技术文章，欢迎访问。

10-item-align-self.html

10-09

在实际开发中，"align-self"属性通常与其他Flexbox属性（如"justify-content"、"flex-direction"、"flex-wrap"等）一起使用，以便构建复杂且响应式的布局。通过对个别元素的对齐方式进行微调，可以创建出整洁且用户...

flex布局-flex-layout-master.zip

01-03

- `align-self`：允许单个Flex项独立设置其在交叉轴上的对齐方式，覆盖容器的`align-items`属性。 5. **Flex容器属性**：用于控制整个Flex布局的行为： - `flex-direction`：定义主轴的方向（默认是`row`，可设置...

justify-self: flex-start; align-self: flex-end;

03-30

### CSS 中 `justify-self` 和 `align-self` 属性的用法及效果 #### 一、`align-self` 的作用与用法 `align-self` 是用于调整单个弹性子项在其交叉轴上的对齐方式。它覆盖了父容器中的 `align-items` 设置，仅影响...

CSS Flexbox布局详解：align-self与justify-self属性应用

weixin_66708577的博客

02-09

1864

随着Web技术的发展，响应式设计和多设备适配变得越来越重要。CSS Flexbox布局因其灵活性和易用性，成为了前端开发者的首选布局方式之一。在Flexbox布局中，和属性允许开发者对单个项目进行精确的对齐控制，从而实现更加灵活和动态的布局效果。在深入和之前，我们先回顾一下Flexbox布局的基本概念：主轴（Main Axis）：Flexbox布局中项目排列的轴，可以是水平或垂直方向（从左往右）。交叉轴（Cross Axis）：垂直于主轴的轴（从上往下）。Flex容器：包含Flex项目的容器，通过设置或来定

无涯教程-Flexbox - align-self属性

无涯教程

02-12

1263

此属性类似于，但是在这里，它应用于单个弹性项目。用法-alignselfautoflexstartflexendcenterbaselinestretch;此属性接受以下值-flex-start - 在集合顶部垂直对齐。flex-end - 在集合底部垂直对齐。flex-center - 在集合的中央垂直对齐。stretch - 伸缩项将垂直对齐，以使其充满集合的整个垂直空间。

flex布局flex取值以及align-self、align-content、align-items的区别

loisandyu的博客

03-04

7188

flex是 flex-grow， flex-shrink，flex-basis 的缩写 flex取值 flex-grow flex-shrink flex-basis 默认值 0 1 auto none 0 0 auto auto 1 1 auto 非负数字（例如flex:1）非负数字（1） 1 0% 长度或百分比（flex:1px或flex:10%） 1 1 长...

移动端布局-flex布局

weixin_49455047的博客

12-06

1024

一.flex布局体验 1.1传统布局与flex布局建议：如果是PC端页面布局，我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 1.2初体验 1.搭建HTML结构 <body> <div> <span></span> <span></span> <span></span>.

项目属性：flex-basis属性、flex属性、align-self属性

巧克力很苦的小博客

05-02

2200

flex-basis属性 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 .item { flex-basis: <length> | auto; /* default auto */ } 这定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如2...

css中align-self属性是什么

很酷的站长的博客

01-19

2932

2、align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。1、align-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。本文教程操作环境：windows7系统、css3版，DELL G3电脑。以上就是css中align-self属性的介绍，希望对大家有所帮助。

Flexible 弹性盒子模型之CSS align-self 属性

zaixianshouce的博客

01-13

309

实例居中对齐弹性对象元素内的某个项： #myBlueDiv { align-self:center; } 复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。属性 align-self 21.0 ...

align-self属性

qwerty0529的博客

02-26

1194

如果弹性子元素没有高度或高度为auto，将占满整个容器的高度。（侧轴）交叉轴起点对齐。调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）* align-self: flex-end;（侧轴）交叉轴终点对齐。（侧轴）交叉轴中点对齐。此属性和弹性容器的 align-items 属性作用相同。