侧轴是相对的 默认主轴是x 所以侧轴就是y轴
align-items设置侧轴上的子元素排列的方式（单行）纵轴方向上的对齐方式
align-items: flex-start; 顶部对齐

align-items: center; 居中对齐
align-items: flex-end; 底部对齐

align-items:stretch 默认值 拉伸 沿着父级元素侧轴方向拉伸（填满父亲高度）

/* 因此实现水平 垂直居中的方式还有一种 */
display: flex; //这是哪个都是使用在方向上
justify-content: center; /*主轴居中对齐*/
align-items: center; /*侧轴居中对齐*/

02-align-items的用法的更多相关文章

  1. 【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

    Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...

  2. Ext.Net学习笔记02：Ext.Net用法概览

    这两天越来越觉得Ext.Net很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,推荐你看一下<Ext.Net Web 应用程序开发教程>. Ext.Net与ExtJ ...

  3. OC 内存管理-02 autorelease 概念 以及用法

    (1) @autoreleasepool { }//自动释放池代表,池子将要被销毁,对池子中所有的对象进行一次release操作 (2) 不管你这个对象时在@autoreleasepool 之内创建的 ...

  4. 02—mybatis的基本用法01

    深入mybatis的配置文件(mybatis-config.xml)   MyBatis的配置文档结构 顶层configuration 配置 properties 属性 settings 设置 typ ...

  5. 【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  6. 【转载】【内存对齐（二）】__declspec( align(#) )的用法和大小计算

    转自:http://www.cppblog.com/deercoder/archive/2011/03/13/141747.html 感谢作者! 在上面讲到了关于pack的内存对齐和计算方法,这里继续 ...

  7. python集合与字典的用法

    python集合与字典的用法 集合: 1.增加  add 2.删除   •del 删除集合 •discard(常用)删除集合中的元素  #删除一个不存在的元素不会报错 •remove 删除一个不存在的 ...

  8. react-native中的style

    在 React Native 中,你并不需要学习什么特殊的语法来定义样式.我们仍然是使用 JavaScript 来写样式. 所有的核心组件都接受名为style的属性.这些样式名基本上是遵循了 web ...

  9. 微信小程序中如何实现分页下拉加载？（附源码）

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  10. iOS - FlexBox 布局之 YogaKit

    由于刚开始的项目主要用的H5.javaScript技术为主原生开发为辅的手段开发的项目,UI主要是还是H5,如今翻原生.为了方便同时维护两端.才找到这个很不错的库. FlexBox?听起来像是一门H5 ...

随机推荐

  1. Under what conditions should the 'start_udev' command be run?

    环境 Red Hat Enterprise Linux 问题 We run start_udev as part of the storage allocation procedure that we ...

  2. 动态构建Lambda表达式实现EF动态查询

    在使用Entity Framework做数据查询的时候,查询条件往往不是固定的,需要动态查询.可以通过动态构建Lamda表达式来实现动态查询. Lamda表达式 使用Lamda表达式可以很方便的按条件 ...

  3. java8-10-Stream的终止操作

      Stream的终止操作   * allMatch 是否匹配所有 * anyMatch 是否匹配一个 * noneMatch 是否没有匹配一个 * findFirst 返回第一个   * count ...

  4. 浅谈JS重绘与回流

    在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...

  5. IT兄弟连 Java语法教程 数组 多维数组 二维数组的声明

    Java语言里提供了支持多维数组的语法.但是这里还想说,从数组底层的运行机制上来看是没有多维数组的. Java语言里的数组类型是引用类型,因此数组变量其实是一个引用,这个引用指向真实的数组内存,数组元 ...

  6. Linux内核驱动之GPIO子系统API接口概述

    1.前言 在嵌入式Linux开发中,对嵌入式SoC中的GPIO进行控制非常重要,Linux内核中提供了GPIO子系统,驱动开发者在驱动代码中使用GPIO子系统提供的API函数,便可以达到对GPIO控制 ...

  7. github上星星1万多的python教程推荐收藏

    简单的说,Python是一个“优雅”.“明确”.“简单”的编程语言. 学习曲线低,非专业人士也能上手 开源系统,拥有强大的生态圈 解释型语言,完美的平台可移植性 支持面向对象和函数式编程 能够通过调用 ...

  8. mysql 常用命令行总结

    登录 mysql -h -u root -p 回车后输入密码,即可登录 直接进入某个库 -D 库名 mysql -h -u root -D account -p 列举数据库.表 show databa ...

  9. 【Ajax】Ajax入门总结

    目录 Ajax( Asynchronous JavaScript and XML ) 向服务器发送请求 服务器回应请求 本文内容总结自 w3cschool: https://www.w3school. ...

  10. Python爬取上交所一年大盘数据

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 半个码农2018 PS:如有需要Python学习资料的小伙伴可以加点 ...