关于align-items和align-content的区别和使用场景
最近在研究flex布局,容器中有两个属性,是用来定义crossAxis测轴排列方式的。一开始接触align-items还可以理解感觉不难,后来看到align-content就感觉有点混淆了,特开一篇博客记录一下我的学习过程。先来看看两个属性的基本用法和定义,这里摘抄于萤火虫塔莉上的回答。
align-items
The align-items property applies to all flex containers, and sets the default alignment of the flex items along the cross axis of each flex line.
align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式。
align-items has the same functionality as align-content but the difference is that it works to center every single-line Container instead of
centering the whole container.
align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。
align-content
The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is
extra space in the cross-axis.
align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。
看到这里大概已经明白了概念,align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。下面写个小demo。
<div id="container">
<div id="One">1</div>
<div id="Two">2</div>
</div>
#container{
width:300px;
height:200px;
display: flex;
border:1px solid #000000;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
/*align-items: flex-start;*/
align-content: space-between;
}
#One,#Two{
width:200px;
height:30px;
border:1px solid red;
}
此时可以看到item的宽度相加大于container的宽度,容器中flex-wrap属性值是wrap即会造成换行,换行后就会有多个crossAxis轴,这个时候就需要用到align-content,先看看结果。
可以看到align-content值生效了,如果是这时候使用align-items会是怎样的效果呢?
align-items是id="One"的DIV生效,而第二个轴上的div没有受到影响。
反之如果width相加小于container的宽度,那么就需要用align-items。align-content则不会生效。在不生效的情况下,两个属性都会去默认值stretch。
关于align-items和align-content的区别和使用场景的更多相关文章
- pyhon-request之repsonse的常用方法reponse.text和reponse.content的区别
1. requests在python2 和 python3中通用,方法完全一样 2. request简单易用 requests的作用 作用:发送网络请求,返回响应数据 用法 response = re ...
- list set map区别及适用场景
list与Set.Map区别及适用场景 1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重 ...
- session,cookie,sessionStorage,localStorage的区别及应用场景
session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...
- Java内存的 静态方法和实例方法的区别及使用场景
注意:变量指基本数据类型非对象,局部变量不能被静态修饰 1.(静态)成员变量存放在data segment区(数据区),字符串常量也存放在该区 2.非静态变量,new出来的对象存放在堆内存,所有局部变 ...
- 【转】ArrayList与LinkedList的区别和适用场景
ArrayList 优点:ArrayList是实现了基于动态数组的数据结构,因为地址连续,一旦数据存储好了,查询操作效率会比较高(在内存里是连着放的). 缺点:因为地址连续,当要插入和删除时,Arra ...
- 转载>>C# Invoke和BeginInvoke区别和使用场景
转载>>C# Invoke和BeginInvoke区别和使用场景 一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程 ...
- java 常用集合list与Set、Map区别及适用场景总结
转载请备注出自于:http://blog.csdn.net/qq_22118507/article/details/51576319 list与Set.Map区别及 ...
- hibernate与mybatis的区别和应用场景
mybatis 与 hibernate 的区别和应用场景(转) 1 Hibernate : 标准的ORM(对象关系映射) 框架: 不要用写sql, sql 自动语句生成: 使用Hibernate ...
- mybatis由浅入深day01_ 4.11总结(parameterType_resultType_#{}和${}_selectOne和selectList_mybatis和hibernate本质区别和应用场景)
4.11 总结 4.11.1 parameterType 在映射文件中通过parameterType指定输入参数的类型.mybatis通过ognl从输入对象中获取参数值拼接在sql中. 4.11.2 ...
- 为什么要使用索引?-Innodb与Myisam引擎的区别与应用场景
Innodb与Myisam引擎的区别与应用场景 http://www.cnblogs.com/changna1314/p/6878900.html https://www.cnblogs.com/ho ...
随机推荐
- 渐进式 JPEG (Progressive JPEG)来提升用户体验
1.概述 jpg格式分为:Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,扩展名也是相同的,唯一的区别是二者显示的方式不同. Base ...
- TCP/IP详解 卷一(第十九章 TCP的交互数据流)
TCP需要同时处理两类数据:块数据.交互数据. 本章将以Rlogin应用为例观察交互数据的传输过程. 交互式输入 首先观察在一个Rlogin连接上键入一个交互命令时所产生的数据流(每键入一个交互按键都 ...
- Deferred Shader GBuffer 感性认识。。。
- Oracle ODBC无Oracle连接驱动
.下载odbc驱动 需要下载两个东西 instantclient.zip instantclient.zip 下载地址:http:.html 解压放到同一个目录(无冲突) .将oracle数据库所在电 ...
- R 包的安装,使用,更新
R包的使用方法 包就是提供了种类繁多的函数,当然还有它的一些数据集,可以使用这些函数来操作这些数据集,来学习使用. library(),当前的工作环境里,可以使用的包 包的帮助文档:help(pack ...
- centos7 重启网卡报错
systemctl restart network 时候报错: rtnetlink answers file exists 是network和NetworkManager冲突了 一般建议直接 syst ...
- C++井字棋游戏,DOS界面版
据说有一个能保证不败的算法.明天看看先再写个PVC版的. 正题.今天无聊写了个井字棋游戏,顺便逐渐让自己习惯良好的代码风格,放上来给新手学习学习. jzq2.cpp /* N字棋游戏PVP版,DOS版 ...
- O(n)求素数,求欧拉函数,求莫比乌斯函数,求对mod的逆元,各种求
筛素数 void shai() { no[1]=true;no[0]=true; for(int i=2;i<=r;i++) { if(!no[i]) p[++p[0]]=i; int j=1, ...
- Spring 中的Null-Safety
之前一直在某些代码中看到过使用@Nullable 标注过的注释,当时也没有在意到底是什么意思,所以这篇文章来谈谈Spring中关于Null的那些事. 在Java中不允许让你使用类型表示其null的安全 ...
- Unity3D性能优化之Draw Call Batching
在屏幕上渲染物体,引擎需要发出一个绘制调用来访问图形API(iOS系统中为OpenGL ES).每个绘制调用需要进行大量的工作来访问图形API,从而导致了CPU方面显著的性能开销. Unity在运行时 ...