在flex弹性盒模型中align-content属性控制容器内多行在交叉轴上的排列方式

默认值:stretch

可用值:

属性值:flex-start

属性值:flex-end

属性值:center

属性值:stretch (默认值)

属性值:space-between

属性值:space-around

下面用具体案例代码案例来详细说明。

HTML代码以及相应的CSS代码:

<div class="container flex">
<div class="items">A</div>
<div class="items">B</div>
<div class="items">C</div>
<div class="items">D</div>
<div class="items">E</div>
<div class="items">G</div>
<div class="items">H</div>
<div class="items">I</div>
</div>
.container {
display: flex;
width: 1000px;
height: 500px;
background-color: gray;
margin: 20px auto;
} .flex {
flex-wrap: wrap;
align-content: flex-end;
} .items {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
font-weight:;
color: gray;
} .items:nth-child(1) {
background-color: #ff0000;
} .items:nth-child(2) {
background-color: #ffff00;
} .items:nth-child(3) {
background-color: #ff00ff;
} .items:nth-child(4) {
background-color: #0000ff;
} .items:nth-child(5) {
background-color: #14a9ee;
} .items:nth-child(6) {
background-color: #71a03b;
} .items:nth-child(7) {
background-color: #c323eb;
} .items:nth-child(8) {
background-color: #ffffff;
}

(1)align-content:flex-start;

描述:元素位于容器的开头。

各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。

.flex {
flex-wrap: wrap;
align-content: flex-end;
}

(2)align-content:flex-end;

描述:元素位于容器的结尾。

各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。

.flex {
flex-wrap: wrap;
align-content:flex-end;
}

(3)align-content:center;

描述:元素位于容器的中心。

各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。)

.flex {
flex-wrap: wrap;
align-content:center;
}

(4)align-content:stretch;

描述:默认值。元素被拉伸以适应容器。

各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。

.flex {
flex-wrap: wrap;
align-content: stretch;
}

(5)align-content:space-between;

描述:元素位于各行之间留有空白的容器内。

各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'flex-start'。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。

.flex {
flex-wrap: wrap;
align-content: space-between;
}

(6)align-content:space-around;

描述:元素位于各行之前、之间、之后都留有空白的容器内。

各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。

.flex {
flex-wrap: wrap;
align-content: space-around;
}

flex中align-content属性的更多相关文章

  1. css:before和after中的content属性

    css有一个属性叫做content.content只能使用在:after和:before之中.它用于在元素之前或者元素之后加上一些内容 就像这样: .email-address:before { co ...

  2. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  3. CSS中content属性的妙用

    前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...

  4. Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子

    原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...

  5. Flex中一些属性总结

    Flex中一些属性总结 1.buttonMode = "true"  鼠标变成手形 2.useHandCursor = "true" 鼠标变成手形

  6. flex布局中父容器属性部分演示效果

    如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...

  7. Flex中设置Camera的视频清晰质量的最佳配合

    今天需要设置Flex中的Camera组件的一些属性,后来发现清晰度不是很高,于是捣鼓了上午半天,设置了很多的参数,竟然发现手册上就是有现成的一些设置方法,郁闷!不过我还是专门设置了几个有用和必要的属性 ...

  8. Flex中TitleWindow传值

    Flex中TitleWindow传值 1.设计思路 (1)新建一个DataGrid,在其中最后一列加入三个按钮:新增.修改和删除: (2)点击新增按钮,可以将表格新增一行: (3)单击"修改 ...

  9. JS 与Flex交互:html中的js 与flex中的actionScript通信

    Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...

  10. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

随机推荐

  1. Luogu P2847 [USACO20DEC]Moocast(gold)奶牛广播-金

    解题思路 要保证图是强连通的,用因为给出的边全部都是双向边.考虑树形的结构,在一棵树上的$N$个节点一定是强连通的.他们都能够互相到达.又要保证树上的$n-1$条边中的最长的一条边最小.那就用Krus ...

  2. Re0:DP学习之路 数塔 HDU - 2084(基础递推)

    解法 首先是输入的问题,输入的时候还要注意每一层都有多少个 然后是怎么求解,一般求解首先要考虑顺序,是正序还是倒序 如果这个题是正序的话那么最终还需要将最后一行进行一次找max的运算 如果是倒序的话那 ...

  3. Springboot2.0中jpa默认创建的mysql表为myisam引擎问题

    使用Springboot2.0后,使用jpa操作mysql数据库时,默认创建的表的引擎是myisam,myisam是不能加外键的,找了一些资源,最终可以用此方法解决! yml格式: spring: j ...

  4. vticker.js--垂直滚动插件

    一.使用要求 列表必须是ul>li的格式 html代码 <div class=" myvticker'"> <ul> <li>1.新闻标题 ...

  5. 洛谷 2048 BZOJ 2006 [NOI2010]超级钢琴

    [题解] 贪心题.设五元组(mx,pos,l,r1,r2)表示最大值为mx,取得最大值的区间右端点为pos,区间左端点为l,区间右端点的可选区间为[r1,r2]. 每次从堆里拎出最大值,然后把这个区间 ...

  6. Discuz 部署,500 – 内部服务器错误。 您查找的资源存在问题,因而无法显示。

    Windows7 IIS 500 – 内部服务器错误解决方案 1.解决方法:打开IIS,在功能视图中找到“错误页”,双击进去后,看最右边的“操作”下的“编辑功能设置…”,将“错误响应”下的“详细错误” ...

  7. redis学习——系统管理

    Redis系统管理 实验简介 上一节实验讲述了Redis的基本数据类型,本实验继续讲解Redis相关命令及管理操作. 在Redis中,命令大小写不敏感. 一.适合全体类型的常用命令 启动redis服务 ...

  8. 实验吧-catalyst-system

    刚学逆向很多都不懂,本题也是在看了 http://countersite.org/articles/reverse_engineering/136-revers-s-alexctf-2017.html ...

  9. noip模拟赛 寻宝之后

    题目背景 还记得NOIP2011的寻宝吗?6年之后,小明带着他的妹子小芳,再次走上了寻宝的道路. 然而这次他们寻宝回来之后,小明被困在了一个迷宫中. 题目描述 迷宫是一个n*m的字符矩阵. 小明在这个 ...

  10. 使用spring框架提供的处理中文乱码的过滤器

    在web-xml中直接写上spring框架提供的过滤器即可 <filter> <filter-name>encoding</filter-name> <fil ...