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

wcssdu

2017-01-12

实例

居中对齐弹性盒的各项 <div> 元素：

div
{
display: flex;
align-items:center;
}

复制

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

align-items	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

定义和用法

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

stretch
否
否。请参阅 CSS3动画属性、CSS3动画实例。
CSS3
object.style.alignItems="center" 效果预览

CSS 语法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值

stretch	默认值。项目被拉伸以适应容器。	效果预览
center	项目位于容器的中心。	效果预览
flex-start	项目位于容器的开头。	效果预览
flex-end	项目位于容器的结尾。	效果预览
baseline	项目位于容器的基线上。	效果预览
initial	设置该属性为它的默认值。请参阅 initial。	效果预览
inherit	从父元素继承该属性。请参阅 inherit。

line-height 弹性盒子 border css solid

wcssdu

0 关注 0 粉丝 0 动态

相关推荐

20个CSS快速提升技巧

本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来

Ladyseven 2020-07-25

Ubuntu 安装Docker

Unbutu系统上安装Docker服务，为保证docker服务的运行未定，需要使用与之相匹配的docker版本，使用命令。若看到上述信息，表明docker安装成功！默认情况下，docker从hub上下载需要安装的进行，囿于这些hub位于国外，下载速度缓慢，

pigsmall 2020-11-19

jackson gson

private static final ObjectMapper objectMapper = new ObjectMapper();

SXIAOYI 2020-09-16

spring cloud 知识点

spring cloud 是一系列框架的有序集合。它利用 spring boot 的开发便利性巧妙地简化了分布式系统基础设施的开发，如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等，都可以用 spring boot 的开发风格做到一键启动和

whileinsist 2020-06-24

HTML中怎么使文字各种居中对齐？（代码示例）

本篇文章主要介绍了如何去写关于html文字居中代码。希望对有需要的朋友有所帮助。前端10K面试准备，最完整面试真题分享（含答案）！text-align 属性规定元素中的文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 just

gufudhn 2020-06-12

css中元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法，并且按照实现的时间线，从css2到css3的各种解决方案，从代码量有少到多的排序来一一说明每种布局方法的实现方式，通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。line-height：用于设置多行元素的空间量

冰蝶 2020-06-05

云计算交付模型知多少 - IaaS、PaaS、SaaS

对于互联网公司而言，迁移到云是一个明智的决定。它减少了总的成本支出，同时最大限度地提高了工作效率和生产率，本文将指出迁移到云或者建设私有云优缺点以及边界在哪里？本地通常是提前把软件基础架构部署在用户计算机上，所有资源使用者自己访问和管理; 相对于本地服务，

LinuxAndroidAI 2020-06-04

Spring Cloud 和 Dubbo 哪个会被淘汰？

今天看到了这样一个问题：Spring Cloud 和 Dubbo哪个会被淘汰？看了几个回答，都觉得不在点子上，所以要么就干脆写篇小文瞎逼叨一下。时至今日，这两个框架放到现在，已经不存在谁取代谁这一说了。不论从Spring Cloud用户来说，还是Dubbo

supperme 2020-05-28

css中vertical-aling与line-height

x-height: 字母x的高度，vertical-aling设置为middle的时候，对齐的是baseline往上1/2的x-height，所以vertical-aling设置为middle不是整正的居中对齐。最终的计算值是和当前 font-size 相

yaodilu 2020-05-10

CSS中的line-height和vertical-height

line-height 设置的是行高，指的是段落中每行文字间的距离。一般来说，将 line-height 设置为 div 元素的高度，则 div 内部的文字将会垂直居中显示。line-height 与 font-size 的计算值之差分为两半，分别加到一行

e度空间 2020-04-27

CSS行高——line-height

底线和顶线包裹的区域，实际中不一定看得到，但却是存在。以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。<p style="font-size:20px;line-height:2em;">字高20px，行高2e

云端漂移 2020-04-09

js正则表达式

javascript 正则表达式和 java perl 等的有些不一样，比如没有后向预查等。不过不能得到匹配的位置。即如果加了全局g标志，正则表达式的分组信息将丢失。这是一种特殊的构造方式。并且注意这里的正则表达式不需要像用字符串构造RegExp 对象那

peterwzc 2020-03-17

jQuery EasyUI视频教程，更新到第20课

由于我也是上班族，也是个程序猿，所以我打算一周左右出一集，大家不要催我，毕竟我业余时间也不是很多。还有本人英文也不咋的，讲解的时候有什么错误欢迎指出，共同学习。大家支持一下，注册一下，给论坛增加一点人气。所以隐藏了下载地址，请回复支持吧```视频是用屏录专

有心就有方向 2012-09-03

转: 7 款华丽的 jQuery/CSS3 效果及源码

很久没有和大家分享精美的jQuery/CSS3应用了，这两天有时间收集了几款新发布的jQuery/CSS3插件，于是就分享给大家，如果喜欢的话请向你的朋友和同事推荐吧。在线演示 /源码下载2、CSS3带头像3D下拉菜单这款CSS3下拉菜单设计富有创意，菜单

ebuild 2013-05-14

编写高效的JavaScript程序

一个基本的编译器，在代码执行前分析JavaScript、生成本地机器代码而非执行字节代码或是简单的解释，该段代码之初不是高度优化的。V8用对象模型“表述”对象。在JavaScript中，对象是一个关联数组，但是V8中，对象被“表述”为隐藏类，这种隐藏类是V

donghedonghe 2013-05-31

svn c命令

大数据资料共享。

ganyouxianjava 2012-05-31

(转载)无联网情况下如何让MyEclipse 识别 spring-beans-2.5.xsd 文件

使用myeclipse开发spring，在编写配置文件的时候可能遇到无法使用帮助，来自动添加xml元素的问题，是因为无法查找spring的DTD描述。这里做个记录手工添加DTD的方法window--》preferences--》MyEclipse--》Fi

tdeclipse 2011-02-28

linux top 命令

最近用LR做性能测试，遇到一个问题，就是当系统压力大时，用LR通近RPC协议监控压测服务器经常会挂掉，这样就监控不到服务器的性能情况。同时，我一般用top在后台观察服务器性能，但是需要时刻查看，因为系统默认是1S更新一次,不能保存服务器性能。top是一个动

linuxprobe0 2013-04-15

linux下安装与卸载JDK1.6

Sun Microsystems, Inc. Binary Code License Agreement for theJAVATM 2 SOFTWARE DEVELOPMENT KIT , STANDARDEDITION, VERSION 1.4.2_X

linuxprobe0 2013-04-01

centos 内网校时

定时较准时间：# crontab -e //打开linux定时计划任务0 23 * * * /usr/sbin/ntpdate 210.72.145.44 //时间格式如下：如果23改为0-23/2 就表示每隔2小时执行一次* * * * * *| |

83560193 2013-06-25

wcssdu

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号