align-items (适用于父类容器上)

设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

语法

align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
  • center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
  • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
  • stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

HTML代码

<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

CSS代码

.box{
display:-webkit-flex;
display:flex;
width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
-webkit-align-items:flex-start;
align-items:flex-start;
}
#box2{
-webkit-align-items:flex-end;
align-items:flex-end;
}
#box3{
-webkit-align-items:center;
align-items:center;
}
#box4{
-webkit-align-items:baseline;
align-items:baseline;
}
#box5{
-webkit-align-items:strecth;
align-items:strecth;
}

align-items (适用于父类容器上)的更多相关文章

  1. 配置docker容器上ssh无密登录

    配置docker容器上ssh无密登录 1.修改所有容器中root账户密码 ssh到远程主机时,首次需要密码访问,因此需要修改root账号密码. 密码必须要8位以上字母数字混合. $>passwd ...

  2. 在docker容器上如何实现代码的版本管理

    之前在一台centos7的虚拟机上部署了docker并运行了三个容器给开发写代码用,写代码肯定会涉及到版本控制管理. 开始建议是开发在容器中写代码,然后通过docker commit的方式将其保存为i ...

  3. Flask 教程 第十九章:Docker容器上的部署

    本文翻译自The Flask Mega-Tutorial Part XIX: Deployment on Docker Containers 这是Flask Mega-Tutorial系列的第十九部分 ...

  4. Docker 实战(2)- 配置 Jenkins 容器上的持续集成环境

    如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 搭建 Jenkins 容器 就是 ...

  5. 【Java心得总结五】Java容器上——容器初探

    在数学中我们有集合的概念,所谓的一个集合,就是将数个对象归类而分成为一个或数个形态各异的大小整体. 一般来讲,集合是具有某种特性的事物的整体,或是一些确认对象的汇集.构成集合的事物或对象称作元素或是成 ...

  6. how tomcat works 五 servlet容器 上

    servlet容器是用来处理请求servlet资源,并为Web客户端填充response对象的模块.在上一篇文章(也就是书的第四章)我们设计了SimpleContainer类,让他实现Containe ...

  7. 容器上使用Docker还是Rocket?为什么不一起用呢?

    在2014年接近尾声时,CoreOS在Docker发布了Rocket,声称Docker的流程模型有着“根本性的缺陷”.虽然CoreOS的创始人Alex Polvi尽量缓和语气,但是他坚持自己的基本观点 ...

  8. Docker - 解决 gitlab 容器上的项目进行 clone 时,IP 地址显示一串数字而不是正常 IP 地址的问题

    问题背景 通过 gitlab 容器创建了一个项目,想 clone 到本地,结果发现项目的 IP 地址是一串数字 问题排查 明明创建项目的时候,IP 地址还是正常的鸭! 再看看项目的 settings ...

  9. kubernetes获取崩溃容器/上一个容器的应用日志

    kubectl logs命令将显示当前容器的日志.当你想知道为什么前一个容器终止时,你想看到的是前一个容器的日志,而不是当前容器的.可以通过添加--previous选项来完成: $ kubectl l ...

随机推荐

  1. RSA的JAVA实现 及javax.crypto.IllegalBlockSizeException

    一.背景 最近工作中涉及到RSA加密的相关需求任务,之前对加密算法了解不多,开发过程中遇到了一些坑记录一下. 二.RSA原理 RSA加密是非对称加密,公开私钥,保留私钥.通信时数据通过公开的公钥加密, ...

  2. java中的安全模型(沙箱机制)

    java中的安全模型(沙箱机制) java安全沙箱(一)之ClassLoader双亲委派机制 java安全沙箱(二)之.class文件检验器 java安全沙箱(三)之内置于Java虚拟机(及语言)的安 ...

  3. C#使用 RNGCryptoServiceProvider 生成强随机字符串

    为了生成更加可靠的随机数,微软在System.Security.Cryptography命名空间下提供一个名为system.Security.Cryptography.RNGCryptoService ...

  4. (转)防止人为误操作MySQL数据库技巧一例

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51cto.com/2561410/1321061 防止人 ...

  5. 【Tomcat】使用记录

    同时绑定ipv4和ipv6 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout=&q ...

  6. Android4.0 Launcher 源码分析1——Launcher整体结构

    1.Launcher整体结构 桌面程序其实并不包含桌面壁纸,桌面壁纸其实是由 WallpaperManagerService来提供,整个桌面其实是叠加在整个桌面壁纸上的另外一个层. 1.1 WorkS ...

  7. golang-利用反射给结构体赋值

    由于想给一个结构体的部分成员赋值,但是有不知道具体名字,故将tag的json名字作为索引,按照json名字来一一赋值 1.通过tag反射//将结构体里的成员按照json名字来赋值 func SetSt ...

  8. Impala查询详解

    Impala的定位是一种新型的MPP查询引擎,但是它又不是典型的MPP类型的SQL引擎,提到MPP数据库首先想到的可能是GreenPlum,它的每一个节点完全独立,节点直接不共享数据,节点之间的信息传 ...

  9. redis实战笔记(5)-第5章 使用 Redis构建支持程序

    本章主要内容 1.使用Redis记录日 志 2.使用Redis实现计数器并进行数据统计 3.查询IP地址所属的城市与国家 4.服务的发现与配置   这一章将介绍如何使用Redis来帮助和支持系统的其他 ...

  10. nginx学习笔记(8)虚拟主机名---转载

    通配符名字正则表达式名字其他类型的名字优化兼容性 虚拟主机名使用server_name指令定义,用于决定由某台虚拟主机来处理请求.具体请参考<nginx如何处理一个请求>.虚拟主机名可以使 ...