关于css中的align-content属性详解
align-content
作用:
会设置自由盒内部各个项目在垂直方向排列方式。
条件:
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
设置对象:
这个属性是对她容器内部的项目起作用，对父元素进行设置。
取值:
stretch:默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
Align-content
</title>
<style> #father{ width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:strech;
height:200px;
background-color:grey;
}
.son1{ height:30px;
width:100px;
background-color:orange;
} .son2{ height:30px;
width:100px;
background-color:red;
} .son3{ height:30px;
width:100px;
background-color:#08a9b5;
} </style>
</head>
<body> <div id="father"> <div class="son1">
q
</div> <div class="son2">
w
</div> <div class="son3">
e
</div>
<div class="son3">
e
</div>
<div class="son3">
e
</div> </div> </body>
</html>
Center:这个会取消项目之间的空白并把所有项目垂直居中。
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style> #father{ width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:center;
height:200px;
background-color:grey;
}
.son1{ height:30px;
width:100px;
background-color:orange;
} .son2{ height:30px;
width:100px;
background-color:red;
} .son3{ height:30px;
width:100px;
background-color:#08a9b5;
} .son4{ height:30px;
width:100px;
background-color:#9ad1c3;
} .son5{ height:30px;
width:100px;
background-color:rgb(21,123,126);
}
</style>
</head>
<body> <div id="father"> <div class="son1">
q
</div> <div class="son2">
w
</div> <div class="son3">
e
</div>
<div class="son4">
e
</div>
<div class="son5">
e
</div> </div> </body>
</html>
Flex-start:这个会取消项目之间的空白，并把项目放在容器顶部。
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style> #father{ width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:flex-start;
height:200px;
background-color:grey;
}
.son1{ height:30px;
width:100px;
background-color:orange;
} .son2{ height:30px;
width:100px;
background-color:red;
} .son3{ height:30px;
width:100px;
background-color:#08a9b5;
} .son4{ height:30px;
width:100px;
background-color:#9ad1c3;
} .son5{ height:30px;
width:100px;
background-color:rgb(21,123,126);
}
</style>
</head>
<body> <div id="father"> <div class="son1">
q
</div> <div class="son2">
w
</div> <div class="son3">
e
</div>
<div class="son4">
e
</div>
<div class="son5">
e
</div> </div> </body>
</html>
flex-end:这个会取消项目之间的空白并把项目放在容器底部。
align-content:flex-end;
space-between这个会使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。
align-content:space-between;
Space-around:这个会使每个项目上下位置保留相同长度空白，使得项目之间的空白为两倍的单个项目空白。
align-content:space-around;
Inherit:使得元素的这个属性继承自它的父元素。
innitial:使元素这个属性为默认初始值。
关于css中的align-content属性详解的更多相关文章
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定 ...
- CorelDRAW中如何复制对象属性详解
复制对象属性是一种比较特殊.重要的复制方法,它可以方便而快捷地将指定对象中的轮廓笔.轮廓色.填充和文本属性通过复制的方法应用到所选对象中.本教程将详解CorelDRAW中如何复制对象属性. Corel ...
- CSS之HTML meta viewport属性详解
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机 ...
- PyQt（Python+Qt）入门：Designer组件属性编辑界面中QWidget类相关属性详解
本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...
- js中caller和callee属性详解
一.caller属性返回一个对函数的引用,该函数调用了当前函数.functionName.callerfunctionName 对象是所执行函数的名称.说明对于函数来说,caller 属性只有在函数执 ...
- css中伪类/伪元素详解
一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...
- 第八章、Designer组件属性编辑界面中QWidget类相关属性详解
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 声明:本文为老猿Python学习研究精心整理而成,禁止转载. 内容提纲 引言概述QWidget属性列 ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- css 14-CSS3属性详解：Web字体
14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...
随机推荐
- js为select添加option
<select id="shi"> function loadInfo(){ var shengId=document.getElementById("she ...
- Java split用法
Java split用法 java.lang.string.split split 方法 将一个字符串分割为子字符串,然后将结果作为字符串数组返回. stringObj.split([separat ...
- FloatingWindow
https://github.com/dev0x10/android-bubble https://github.com/dev0x10/FloatingView https://github.com ...
- kvm上安装xp
主要为了看看图像显示是否有问题,跑起来系能如何,网络连接.文件共享是怎样的. 用的是雨林木风xp sp3的iso.为了提高性能,决定使用qcow2格式,预分配metadata,cache=none(查 ...
- sphinx的简单实例
sphinx.conf中的配置: source indexLocation { type = mysql sql_host = 192.168.1.113 sql_user = root sql_pa ...
- Linux HugePages及MySQL 大页配置
http://blog.csdn.net/dba_waterbin/article/details/9669929 ㈠ HugePages简介 HugePages是 ...
- C#_Queue实例
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Queu ...
- python列表删除重复元素的三种方法
给定一个列表,要求删除列表中重复元素. listA = ['python','语','言','是','一','门','动','态','语','言'] 方法1,对列表调用排序,从末尾依次比较相邻两个元素 ...
- js用斜率判断鼠标进入div的四个方向
网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...
- 不规则三角网（TIN）（转）
来自:http://blog.csdn.net/kikitamoon/article/details/8217641 Ⅰ 数字高程模型(DEM) 地球表面高低起伏,呈现一种连续变化的曲面,这种曲面无法 ...