侧轴是相对的 默认主轴是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. mssql 系统函数 字符串函数 space 功能简介

    转自: http://www.maomao365.com/?p=4672  一.space 函数功能简介 space功能:返回指定数量的空格参数简介: 参数1: 指定数量,参数需为int类型 注意事项 ...

  2. 如何使用 TRANSPORTABLE = ALWAYS 将PDB移回Non-CDB (Doc ID 2027352.1)

    How to Move a PDB Back to a Non-CDB Using TRANSPORTABLE=ALWAYS (Doc ID 2027352.1) APPLIES TO: Oracle ...

  3. ramfs 和 tmpfs 以及 ramdisk相关调研

    最近需要使用到 ramfs 和 tmpfs 做内存文件系统,下面对这两个文件系统相关的信息,做一下总结: 参考链接: https://www.thegeekstuff.com/2008/11/over ...

  4. YUM命令总结

    1.关于YUM源 Yum 全称为 Yellow dog Updater Modified,它是一个在线的软件安装命令. 能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性关系,并且一次安装 ...

  5. 201871010115-马北《面向对象程序设计（java）》第一周学习总结

    博文正文开头格式:(3分) 项目 内容 这个作业属于哪个课程 <https://www.cnblogs.com/nwnu-daizh/> 这个作业的要求在哪里 <https://ww ...

  6. CPU参数指标说明

    %user %user表示CPU一共花了多少比例的时间运行在用户态空间或者说是用户进程(running user space processes) 典型的用户态空间程序有:Shells.数据库.web ...

  7. Jmeter 压测使用以及参数介绍

    . 下载地址 https://jmeter.apache.org/download_jmeter.cgi Binaries¶ 下的apache-jmeter-5.2.1.zipsha512pgp . ...

  8. IT兄弟连 Java语法教程 流程控制语句 循环结构语句2

    双重for循环 如果把一个循环放在另一个循环体中,那么就可以形成嵌套循环,也就是双重for循环,当然嵌套循环也可以是for循环嵌套while循环,也可以是while循环嵌套while循环……,即各种类 ...

  9. 【文本处理命令】之awk命令详解

    一.awk命令简介 awk 是一种很棒的语言,它适合文本处理和报表生成,其语法较为常见,借鉴了某些语言的一些精华,如 C 语言等.在 linux 系统日常处理工作中,发挥很重要的作用,掌握了 awk将 ...

  10. pytest框架之pytest-html报告生成

    一.关于安装 pytest-html属于pytest的一个插件,使用它需要先安装 pip install pytest-html pytest可以生成多种样式的结果: 生成JunitXML格式的测试报 ...