侧轴是相对的 默认主轴是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. 使用bean接收ajax表单提交数据包含文件上传

    这几天写带图片上传的表单提交,一个配置小程序活动弹出框样式的功能,记录一下一些需要注意的地方 首先是 前端 JSP 文件的表单 <form class="search-wrapper& ...

  2. 自己用到的解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误的办法如下:

    Python3.6.5 Django2.0 这是Django版本与xadmin兼容的问题 解决办法如下: 注释掉如下代码: def render(self, name, value, attrs=No ...

  3. Nginx 配置详细文件

    概述 Nginx 是使用一个 master 进程来管理多个 worker 进程提供服务.master 负责管理 worker 进程,而 worker 进程则提供真正的客户服务,worker 进程的数量 ...

  4. 201871010121-王方《面向对象程序设计（Java）》第一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/wf-001128/ 作 ...

  5. Re-stheasy

    https://dn.jarvisoj.com/challengefiles/ctf2.b93676be23733b2fcda3988c1133c1c1 用IDA-32bit 打开,找到main函数 ...

  6. Global Azure Bootcamp 2019 宁波站活动总结

    4月27日,由微软MVP技术社区发起的Global Azure Bootcamp 2019盛会在全球80多个国家270个城市举办.本次活动由全国众多Azure专家及微软MVP技术社区成员,分别在北京. ...

  7. js获取url参数值的方法总结

    1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及参数值的集合 /** * [获取URL中的参数名及参数值的集合] * 示例URL:http://htmlJsTest/ ...

  8. 创意编程，Python开发多功能壁纸自动切换工具！

    import ctypes import time import requests import os from threading import Thread from tkinter import ...

  9. ARM64 的 memcpy 优化与实现

    参考:https://www.byteisland.com/arm64-%E7%9A%84-memcpy-%E6%B1%87%E7%BC%96%E5%88%86%E6%9E%90/ libc/stri ...

  10. idea使用lombok不生效的解决办法

    file-->setting-->plugins点击下方的 browse repositories. 搜索lombok plugin. 安装后,重启. file-->setting- ...