侧轴是相对的 默认主轴是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部分有关function(type)中type的个人理解

    官方文档关于button组件的简介 xml页面挺容易理解,但js部分起初对整体写的形式都不太理解,随着逐渐阅读代码基本理解了 xml页面代码: <button type="defaul ...

  2. MATLAB实例：将批量的图片保存为.mat文件

    MATLAB实例:将批量的图片保存为.mat文件 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 一.彩色图片 图片数据:horse.rar 1. MA ...

  3. MATLAB实例：为匹配真实标签，对训练得到的标签进行调整

    MATLAB实例:为匹配真实标签,对训练得到的标签进行调整 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. MATLAB程序 munkres.m ...

  4. poj 3069 Saruman's Army 贪心 题解《挑战程序设计竞赛》

    地址 http://poj.org/problem?id=3069 题解 题目可以考虑贪心 尽可能的根据题意选择靠右边的点 注意 开始无标记点 寻找左侧第一个没覆盖的点 再来推算既可能靠右的标记点为一 ...

  5. Educational Codeforces Round 76 (Rated for Div. 2) A. Two Rival Students 水题

    A. Two Rival Students There are

  6. [java 基础]反射入门

    原文 概况 使用java的反射,可以让我们检查(或者修改)类,接口,字段,方法的特性.当你在编译期不知道他们的名字的时候非常有用. 除此之外,可以使用反射来创建实例,调用方法或者get/set 字段值 ...

  7. SourceTree3.2.6版本跳过注册办法

    一.去sourceTree官网下载最新的包 官网:https://www.sourcetreeapp.com/windows版下载地址:https://product-downloads.atlass ...

  8. Mysql 查看死锁，解除死锁 方式

    解除正在死锁的状态有两种方法: 第一种: 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程(如果您有SUPER权限,您可以看到所有线程.否则, ...

  9. 总结了11条，我对Python 装饰器的理解

    对于每一个学习 Python 的同学,想必对 @ 符号一定不陌生了,正如你所知, @ 符号是装饰器的语法糖,@符号后面的函数就是我们本文的主角:装饰器. 装饰器放在一个函数开始定义的地方,它就像一顶帽 ...

  10. 1G内存VPS安装 mysql5.6 经常挂

    背景介绍 去年3月份的时候参加了腾讯云主机活动,5年362,非常优惠.当时的想法是买来可以瞎整一波,虽然配置不高,但是搞点事情也够用. 配置如下,上海机房 1 核 1 GB 1 Mbps 系统盘:普通 ...