<!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. USB集线器基础知识

    1.USB集线器又称为USB Hub,用于拓展计算机USB接口.计算机主板上对外往往提供多个USB接口,这些接口往往都是通过主板上的USB集线器芯片来拓展出来的.我们平常用的可以连接多个USB接口的设 ...

  2. mysql 删除

    DROP删表,表结构将删了,当然数据也不存在了 TRUNCATE和DELETE删数据,表结构还在 DELETE可以带条件删除,TRUNCATE是全部删除 DELETE删除会写日志,TRUNCATE不写 ...

  3. 关于Unity中协程、多线程、线程锁、www网络类的使用

    协程 我们要下载一张图片,加载一个资源,这个时候一定不是一下子就加载好的,或者说我们不一定要等它下载好了才进行其他操作,如果那样的话我就就卡在了下载图片那个地方,傻住了.我们希望我们只要一启动加载的命 ...

  4. Linux操作_常用命令操作练习

    1,新键一个用户,该用户名为自己姓名首字母缩写+学号最后2位组成(如王东,学号最后2位为18,则该用户名为wd18),为该用户设置密码,并将其加到users组:将该用户的相关信息更改(要求:Name为 ...

  5. Java数组扩展

    Java中,数组初始化后如何扩展数组? 示例 以下示例显示如何在创建新并初始化数组后扩展数组. package com.yiibai; public class ExtendingArray { pu ...

  6. Python——eventlet

    eventlet语境下的“绿色线程”普通线程之间的区别: 1. 绿色线程几乎没有开销,不用像保留普通线程一样保留“绿色线程”,每一个网络连接对应至少一个“绿色线程”: 2. 绿色线程需要人为的设置使其 ...

  7. Python学习注脚

    python版本:2.7.6 Python基础学习书摘. 变量命名规范: python的变量名只能由字母和数字组成,且必须以字母开头. python的变量名不能使用系统已有的关键字,包括: and c ...

  8. Elasticsearch5.2.2安装

    安装环境: 操作系统:centos 6.8 jdk版本:jdk1.8.0_121 应用版本:Elasticsearch 5.2.2 1.Elasticsearch5.2.2安装 (1)下载地址: wg ...

  9. linux下时间同步的两种方法分享

    方法1:与一个已知的时间服务器同步 复制代码 代码如下: ntpdate time.nist.gov 其中 time.nist.gov 是一个时间服务器. 删除本地时间并设置时区为上海 复制代码 代码 ...

  10. 由于PADT伪造攻击带来的大面积掉线原因分析

    今天一早接到一个客户电话,说他有一个交换机下面的用户,大面积和上线下线. 由于之有已建议用户在主干换了普通VLAN交换机.所以这次出现问题概率较小,只在一条支路的交换机下面. 下面我对这个情况的发生做 ...