<!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. 如何在ROS中使用PCL—数据格式（1）

    在ROS中点云的数据类型 在ROS中表示点云的数据结构有: sensor_msgs::PointCloud      sensor_msgs::PointCloud2     pcl::PointCl ...

  2. webpack1--安装与初始化

    webpack可用于打包所有的脚本,图片,样式表及其他资源. 今天来讲一下如何安装webpack 及 创建package.json.webpack依赖于npm和 node,所以本文是假设你已安装好了n ...

  3. Reordering the columns in a data frame

    Problem You want to do reorder the columns in a data frame. Solution # A sample data frame data < ...

  4. Sword protobuf学习二

    编写protobuf消息文件 文件格式: xxx.proto //标明使用哪个版本的protobuf,默认2.0版本 syntax = "proto3"; //类似于c++中的na ...

  5. Enums and Lookup Tables with EF Code First

    With EntityFramework’s support for enums, there is no longer any need to include lookup tables in th ...

  6. 3种启动tornado的方式

    r"""A non-blocking, single-threaded HTTP server. 翻译: 一个非阻塞的单线程HTTP服务器 A server is def ...

  7. WM_CONCAT字符超过4000的处理办法

    参考网址: http://stackoverflow.com/questions/11541383/ordering-by-list-of-strings-in-oracle-sql-without- ...

  8. SAP中方会计凭证打印解决方案

    中方会计凭证由于 编码格式 以及 科目对照关系 是无法直接使用SAP自带的凭证打印功能的,如下为客户开发的一个解决方案,供各位参考 1).需要定制几个Table的结构 zc0000fit0009[科目 ...

  9. qualcomm qact 使用记录

    使用QACT调试音频,首先安装QPST,并安装对应的usb驱动,如果驱动没有安装好,有驱动精灵等软件进行安装. QPST configure中选择对应的设备. 在线调试 打开QACT,选择" ...

  10. 嵌入式开发之zynq---Zynq PS侧sd驱动

    http://blog.chinaunix.net/uid-29404121-id-4217026.html http://blog.chinaunix.net/uid-29709984-id-430 ...