<!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. linq操作符：聚合操作符

    一.Aggregate操作符 Aggregate操作符对集合值执行自定义聚合运算.来看看Aggregate的定义: public static TSource Aggregate<TSource ...

  2. [技术选型] CDH-Cloudera Distribution Hadoop

    hadoop是一个开源项目,所以很多公司在这个基础进行商业化,Cloudera对hadoop做了相应的改变. Cloudera公司的发行版,我们将该版本称为CDH(Cloudera Distribut ...

  3. FatJar in 创新实训 自然语言交流系统

    Fat Jar Eclipse Plug-In是一个可以将Eclipse JavaProject的所有资源打包进一个可执行jar文件的小工具,可以方便的完成各种打包任务,我们经常会来打jar包,但是e ...

  4. qualcomm batch 烧录脚本

    在烧录android系统候用到了windows的批处理文件,拿出来分析一下,顺便记录一下高通平台烧录系统的命令. @echo off :: @ :不显示后面的命令,就是后面的"echo of ...

  5. CentOS 6.8 安装 RabbitMQ

    放上来做个备份. 1.下载RabbitMQ http://www.rabbitmq.com/download.html 选择 RHEL/CentOS 6.x 下载即可. 或者 http://www.r ...

  6. VS下关于 _CRT_SECURE_NO_WARNINGS 问题的分析与解决

    一.问题的起因 六月下旬,老师布置了有关图形学的课设,于是我将我在VS2013中写好的代码进行编译,结果得到了以下信息: 二.解决方法 1,按照英文提示,我先将fopen改成了fopen_s后,发现错 ...

  7. SpringBoot系列十二：SpringBoot整合 Shiro

    声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.概念:SpringBoot 整合 Shiro 2.具体内容 Shiro 是现在最为流行的权限认证开发框架,与它起名的只有最初 ...

  8. SpringMVC系列（十六）Spring MVC与Struts2的对比

    • Spring MVC 的入口是 Servlet, 而 Struts2 是 Filter• Spring MVC 会稍微比 Struts2 快些. Spring MVC 是基于方法设计, 而 Stu ...

  9. SecureCRT连接linux，vim颜色显示问题

    为什么使用VIM?由于具有颜色显示的功能.而且还支持很多程序语法.VIM能够帮助你直接进行程序除错.可是在SecureCRT连接Linux后显示就是黑白,感觉非常不爽! ! 怎么办? vim编敲代码也 ...

  10. C# 批量生成邮箱地址代码

    如图,是我生成好的5万条邮箱数据, 其实,网上有大量批量生成邮箱的软件,多种多样的生成格式,各种设置,各种组合, 我不需要那么强大,只需要生成不重复的邮箱地址即可,所以,我懒得从网上下载了, 反正就几 ...