最近在研究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的区别的更多相关文章

  1. pyhon-request之repsonse的常用方法reponse.text和reponse.content的区别

    1. requests在python2 和 python3中通用,方法完全一样 2. request简单易用 requests的作用 作用:发送网络请求,返回响应数据 用法 response = re ...

  2. python response.text和response.content的区别

      1.重点理解 response.text返回的类型是str response.content返回的类型是bytes,可以通过decode()方法将bytes类型转为str类型 推荐使用:respo ...

  3. Python获取爬虫数据, r.text 与 r.content 的区别

    1.简单粗暴来讲: text 返回的是unicode 型的数据,一般是在网页的header中定义的编码形式. content返回的是bytes,二级制型的数据. 如果想要提取文本就用text 但是如果 ...

  4. requests中text和content的区别

    # -*- coding: utf-8 -*- __author__ = "nixinxin" import re img_url = "https://f11.baid ...

  5. response.text与content的区别

    在某些情况下来说,response.text 与 response.content 都是来获取response中的数据信息,效果看起来差不多.那么response.text 和 response.co ...

  6. BooStrap4文档摘录 Utilities

    border:可以用原生css实现效果.❌没看 clearfix, float,  ✅ close icon ✅ colors ✅ display✅  各种显示的格式. embed ✅ <ifr ...

  7. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  8. (转)Quirks模式与standards模式区别

    建议:不推荐使用Quirks Mode. Quirks Mode中发生了什么?Quirks Mode是一种浏览器(像IE,Firefox,Opera)操作模式.从根本上说,怪异模式(也称之为兼容模式) ...

  9. Extjs4学习

    1 Ext js初步 1.1 获取Extjs 下载extjs: 可以从http://extjs.org.cn/ 获得需要的extjs发布包及更多支持. 1.2 搭建学习环境: 假设您的机器已经安装my ...

  10. ASP精华[转]

    <% '#######以下是一个类文件,下面的注解是调用类的方法################################################ '# 注意:如果系统不支持建立S ...

随机推荐

  1. [转帖]紧急预警:Globelmposter3.0变种来袭,多行业中招

    紧急预警:Globelmposter3.0变种来袭,多行业中招 https://www.csdn.net/article/a/2018-09-04/15959658   CSDN 转载深信服...   ...

  2. [51CTO]反客为主 ,Linux 成为微软 Azure 上最流行的操作系统

    反客为主 ,Linux 成为微软 Azure 上最流行的操作系统 [世界上唯一确定不变的就是世界在不停的变化] 三年前,微软云计算 Azure 平台 CTO Mark Russinovich 说有四分 ...

  3. JVM中各种变量保存位置

    Java中变量分为静态变量,实例变量,临时变量.那么各种变量具体保存在JVM中的何处呢? 1 静态变量:位于方法区. 2 实例变量:作为对象的一部分,保存在堆中. 3 临时变量:保存于栈中,栈随线程的 ...

  4. MT【137】多少个?

    数列\(\{a_n\}\)共11项,\(a_1=0,a_{11}=4\),且\(|a_{k+1}-a_{k}|=2,k=1,2,\cdots,10\) 求满足条件的不同的数列的个数______ 解答: ...

  5. MT【118】利用线面角最小解题

    解:如图将正四面体放到立方体中,让AB通过$\alpha$面,让$\alpha$面绕着AB动起来.问题就转化成为EF与面$\alpha$线面角$\theta$了.EF的投影为$|EF|cos\thet ...

  6. 【CF995F】Cowmpany Cowmpensation(动态规划,拉格朗日插值)

    [CF995F]Cowmpany Cowmpensation(多项式插值) 题面 洛谷 CF 题解 我们假装结果是一个关于\(D\)的\(n\)次多项式, 那么,先\(dp\)暴力求解颜色数为\(0. ...

  7. Permutations II - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Permutations II - LeetCode 注意点 不确定有几种排列 解法 解法一:因为有重复的数字所以排列的个数不确定几个,一直生成新的排列直 ...

  8. BZOJ2789 [Poi2012]Letters 【树状数组】

    题目链接 BZOJ 题解 如果我们给\(A\)中所有字母按顺序编号,给\(B\)中所有字母编上相同的号码 对于\(B\)中同一种,显然号码应该升序 然后求逆序对即可 #include<algor ...

  9. Android 5.0 Lollipop SDK下载地址(PASS)

    Android 5.0 ARM EABI v7a System Image https://dl-ssl.google.com/android/repository/sys-img/google_ap ...

  10. 21天实战caffe笔记_第二天

    1 传统机器学习 传统机器学习:通过人工设计特征提取器,将原始数据转化为合适的中间表示形式或者特征向量,利用学习系统(通常为分类器)可以对输入模式进行检测或者分类.流程如下: 传统机器学习的局限在于需 ...