侧轴是相对的 默认主轴是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. 如何去除小程序button的边框

    小程序button 自带样式,就算用 border:none: background:none ,还是会有一条细的边框 使用:after选择器就可以去除 button::after{ border:n ...

  2. Python入门基础学习(文件与异常处理)

    Python基础学习笔记(七) 捕获异常的语法格式: 文件的基本操作: 打开文件 读.写文件 关闭文件 read方法 --读取文件: open函数的第一个参数是要打开的文件名(文件名区分大小写) 如果 ...

  3. The 2017 ACM-ICPC Asia Beijing Regional Contest

    传送门 C - Graph 题意: 给出一个\(n\)个点\(m\)条边的无向图.现在有多组询问,每组询问给出区间\([l,r]\),问区间\([l,r]\)中有多少点对是连通的. 思路: 若考虑只有 ...

  4. qt用于图片显示的窗口

     用于图片显示的窗口 国产化  

  5. 4. 语义"陷阱"

    1. 假定对于下标越界的数组元素取其地址也是非法的,那么对于本书3.6(该标题下为4.6)节中的bufwrite程序应该如何书写? void bufwrite(char *p, int n){ whi ...

  6. C#位运算实际作用之操作整型某一位

    1.前言 前几天写了两篇关于c#位运算的文章 c#位运算基本概念与计算过程 C#位运算实际运用 在文中也提到了位运算的实际作用之一就是合并整型,当时引用了一个问题: C# 用两个short,一个int ...

  7. Saiku嵌入页面plugin=true效果自定义实现（二十七）

    Saiku嵌入页面使用 自定义实现 Plugin=true 效果 saiku嵌入页面plugin=true时数据不显示(plugin=false或者不设定plugin的值时数据显示正常)这个问题困扰了 ...

  8. LeetCode | 机器人能否返回原点

    放假的时间已经过去一半了,每天坚持看一个多小时的书,时间虽然不多,但是能专心把书看进去就可以了.今天分享的是 LeetCode 上面的第 657 题,题目是<机器人能否返回原点>,这也是一 ...

  9. PHP】获取客户端（浏览器）信息、获取客户端系统信息、获取服务器信息

    * 获取客户端浏览器信息 * @param null * @author https://blog.jjonline.cn/phptech/168.html * @return string */ f ...

  10. oracle 中 to_date 函数的用法

    常犯错的使用方法. to_date('2019-08-12 22:05:','yyyy-MM-dd HH24:mm:ss') Oracle中会引起错误:"ORA 01810 格式代码出现两次 ...