Flexible 弹性盒子模型之CSS align-self 属性
实例
居中对齐弹性对象元素内的某个项:
- #myBlueDiv
- {
- align-self:center;
- }
效果预览
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。
属性 | |||||
---|---|---|---|---|---|
align-self | 21.0 | 11.0 | 20.0 |
9.0 7.0 -webkit- |
12.1 |
定义和用法
align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。。
注意:align-self 属性可重写灵活容器的 align-items 属性。
默认值: | auto |
---|---|
继承: | 否 |
可动画化: | 否。请参阅 CSS3动画属性、CSS3动画实例。 |
版本: | CSS3 |
JavaScript 语法: | object.style.alignSelf="center" 效果预览 |
CSS 语法
属性值
值 | 描述 | 测试 |
---|---|---|
auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 | 效果预览 |
stretch | 元素被拉伸以适应容器。 | 效果预览 |
center | 元素位于容器的中心。 | 效果预览 |
flex-start | 元素位于容器的开头。 | 效果预览 |
flex-end | 元素位于容器的结尾。 | 效果预览 |
baseline | 元素位于容器的基线上。 | 效果预览 |
initial | 设置该属性为它的默认值。请参阅 initial。 | 效果预览 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
转载于:https://www.cnblogs.com/niuboren/p/6281393.html
Flexible 弹性盒子模型之CSS align-self 属性相关推荐
- Flexible 弹性盒子模型之CSS justify-content 属性
实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...
- Flexible 弹性盒子模型之CSS flex-shrink 属性
实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...
- Flexible 弹性盒子模型之CSS align-items 属性
实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...
- Flexible 弹性盒子模型之flex
实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
- 微信小程序---弹性盒子模型
1.弹性盒子布局 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为 ...
- flex弹性布局之弹性盒子模型
一,flex弹性盒子布局 1. flex弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式.CSS3 弹性盒( Flexible Box 或 flexbox,是一种当页面需要适应不同的屏幕大小以及 ...
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知: <!-- 单行显示省略号 --> .css {white-space: nowrap;overflow: hidden;text-overf ...
最新文章
- 如何在敏捷框架下做好工作交接
- 我们用最详细的方式解析Android消息机制的源码,经典好文
- org.hibernate.util.JDBCExceptionReporterorg.hibern
- 在MAC中配置Tomcat+Nginx代理
- 【Rxjs】 - 解析四种主题Subject
- spring整合atomikos实现分布式事务的方法示例_分布式事务中的XA和JTA
- sqlserver把小数点后面多余的0去掉
- 用Mindjet MindManager 15 打开文件后停止响应的解决方法
- .NET微信公众号开发系列 - 项目介绍
- 关于 Hibernate 中的“脏数据”、“脏对象”
- 各大搜索引擎地址收录登记入口
- LeetCode 209. 长度最小的子数组 (滑动窗口)
- MYSQL语句和多表查询
- [转载]使用Java将Word转为Html或txt!
- 可以在手机预览ps设计稿的软件
- 蓝星微商城源码+搭建教程源码
- 【Python学习】制作一个汇率换算程序
- [个人笔记]FDTD100
- 51单片机c语言16进制数转换10进制数,51单片机C语言里 怎样将16进制 直接化成 10进制...
- 用计算机对视频进行剪裁和编辑,Win10系统剪裁视频功能怎么用?windows10剪裁视频功能使用方法介绍...
热门文章
- Spring Boot MongoDB 入门
- HashMap?面试?我是谁?我在哪
- 小谈 Java 单元测试
- 掌握这 11 个方法论,搞定一场完美技术面试!
- Java线程详解(16)-条件变量
- 分解和合并:Java 也擅长轻松的并行编程!
- iOS 代码实现获得应用的版本号(Version/Build)
- java 700c corsa_JAVA CORSA休闲车,缔造“城市 生活 元素”
- php exif信息,php通过exif_read_data函数获取图片的exif信息
- 湿度传感器如何工作?