<!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属性的更多相关文章

  1. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox父盒子flex-wrap属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子flex-direction属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox子盒子align-self属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 让div盒子相对父盒子垂直居中的几种方法

    div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

  7. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

  8. flexbox 弹性盒子

    flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...

  9. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

随机推荐

  1. 百度网盘 http://pandownload.com/index.html

    https://github.com/high-speed-downloader/high-speed-downloader

  2. Spring Cloud Eureka 集群搭建 - 以及发现一个 “直觉BUG”

    首先解释一下标题所说的“直觉BUG”,这个是我自己的定义.就是我们直觉上认为这是一个BUG,是一个错误,而实际并没有出错. 比如下图: 虽然出现报错信息,但是,整个程序并没有出错.至于原因,图片上的文 ...

  3. FPGA内部动态可重置PLL讲解（一）

    SDRAM驱动需要两个时钟,一个是控制时钟,一个是驱动时钟,这两个时钟有一个相位差,如何产生高精度的时钟是SDRAM能够正常工作的关键,采用FPGA内部动态可重置PLL生成SDRAM所需要的时钟频率. ...

  4. sublime text 2使用方法

    笔者用过的一些软件用来写Verilog代码,比如notepad+,ultra,editplus等,近日在群里看到大家在讨论一个比较有意思的软件,sublime text,才发现有种相见恨晚的感觉,其实 ...

  5. 实验一 ASP.NET应用环境配置 总结

    通过本次实验我学会了在Windows XP系统中安装IIS服务器,虽然我的电脑是Windows7系统,但是通过虚拟机软件,配置了一台Windows XP系统的虚拟机,在虚拟机内进行各项配置操作.这次实 ...

  6. 使用 WinDbg 分析dump文件

    步骤一: 生成dump文件. #include <Windows.h> #include <iostream> #include <DbgHelp.h> #incl ...

  7. Python encode() 方法

    描述 encode() 方法以指定的编码格式编码字符串,默认编码为 'utf-8'. 对应的解码方法:bytes decode()  方法. 语法 encode() 方法语法: S.encode([e ...

  8. （实用）Linux下Eclipse安装配置PyDev

    记录备忘. PyDev是Eclipse下支持Python开发的IDE插件,本文介绍安装和配置PyDev插件的过程. 一.安装PyDev插件两种安装方法: 1.在eclipse的Help->Ins ...

  9. 图解DHCP的4步租约过程

    图解DHCP的4步租约过程   DHCP租约过程就是DHCP客户机动态获取IP地址的过程. DHCP租约过程分为4步: ①客户机请求IP(客户机发DHCPDISCOVER广播包): ②server响应 ...

  10. python模块之psutil详解

    一.psutil模块: 1.psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息 ...