flexbox父盒子align-items属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex-container {
display: flex;
/*整体上对齐*/
/*align-items: flex-start;*/
/*整体垂直居中*/
/*align-items: center;*/
/*整体下对齐*/
/*align-items: flex-end;*/
/*默认值：当子盒子没有设置高度时，子盒子高度拉伸至和父盒子同高*/
/*align-items: stretch;*/
/*当文字大小不一时，子盒子以较大文字的基线对齐，不常用*/
align-items: baseline;
width: 400px;
height: 400px;
background-color: gray;
}
.flex-item {
background-color: green;
width: 100px;
height: 100px;
margin: 5px;
}
.flex-item:nth-child(1) {
font-size: 20px;
}
.flex-item:nth-child(2) {
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
flexbox父盒子align-items属性的更多相关文章
- flexbox父盒子align-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子flex-wrap属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子justify-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子flex-direction属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox子盒子align-self属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
- flexbox弹性盒子模型
这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...
- flexbox 弹性盒子
flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...
- css FlexBox 弹性盒子常用方法总结
总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...
随机推荐
- nodejs开发——require与exports的使用
nodejs开发——require与exports的使用 另一片文章总结:http://www.cnblogs.com/hfultrastrong/p/8036682.html require req ...
- Java设计模式（21）访问模式（Visitor者模式）
Visitor定义:作用于某个对象群中各个对象的操作.它可以使你在不改变这些对象本身的情况下,定义作用于这些对象的新操作. 在Java中,Visitor模式实际上是分离了collection结构中的元 ...
- js文档碎片
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...
- 自然语言交流系统 phxnet团队 创新实训 项目博客 （八）
在本项目中使用到的“文本转语音”的技术总结: 文本转语音,使用的是科大讯飞的接口,因为此作品之中语音包不是重点,所以语音包的转换我们统一调用的科大讯飞的语音包接口,依旧是在线的文字转语音,客户端将来自 ...
- getDimension()、getDimensionPixelOffset()和getDimensionPixelSize()区别详解
getDimension()是基于当前DisplayMetrics进行转换,获取指定资源id对应的尺寸.文档里并没说这里返回的就是像素,要注意这个函数的返回值是float,像素肯定是int. getD ...
- Numpy的array数组和标量之间的运算
矢量化 数组很重要,因为它使你不用编写循环即可对数据执行批量运算.这通常就叫做矢量化(vectorzation) 数组与数组的运算 数组与标量的算术运算
- [转]8款实用的jQuery/CSS3最新插件应用
今天给大家分享8款非常酷的最新jQuery/CSS3应用插件,废话少说,下面一起来看看这些插件吧. 1.HTML5重力感应积木游戏 这也是一款基于HTML5技术的重力感应游戏,一些积木从天而降,你可以 ...
- Spring JDBC SimpleJdbcCall类示例
org.springframework.jdbc.core.SimpleJdbcCall类是表示对存储过程或存储函数的调用的多线程,可重用的对象. 它提供元数据处理以简化访问基本存储过程/函数所需的代 ...
- ZooKeeper系列之二:Zookeeper常用命令
https://my.oschina.net/u/347386/blog/313037
- Python——eventlet.hubs
Hub构成了 Eventlet 的事件循环,它分发 I/O 事件.调度 greenthread.Hub的存在使得协程被提升为 greenthreads. Eventlet 有多种hub的实现,所以在使 ...