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属性详解的更多相关文章

  1. HTML中元素的position属性详解

    HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935   HTML中DOM元素有5种定 ...

  2. CorelDRAW中如何复制对象属性详解

    复制对象属性是一种比较特殊.重要的复制方法,它可以方便而快捷地将指定对象中的轮廓笔.轮廓色.填充和文本属性通过复制的方法应用到所选对象中.本教程将详解CorelDRAW中如何复制对象属性. Corel ...

  3. CSS之HTML meta viewport属性详解

    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机 ...

  4. PyQt（Python+Qt）入门：Designer组件属性编辑界面中QWidget类相关属性详解

    本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...

  5. js中caller和callee属性详解

    一.caller属性返回一个对函数的引用,该函数调用了当前函数.functionName.callerfunctionName 对象是所执行函数的名称.说明对于函数来说,caller 属性只有在函数执 ...

  6. css中伪类/伪元素详解

    一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...

  7. 第八章、Designer组件属性编辑界面中QWidget类相关属性详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 声明:本文为老猿Python学习研究精心整理而成,禁止转载. 内容提纲 引言概述QWidget属性列 ...

  8. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  9. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  10. css 14-CSS3属性详解：Web字体

    14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...

随机推荐

  1. （Map）利用Map，完成下面的功能：  从命令行读入一个字符串，表示一个年份，输出该年的世界杯冠军是哪支球队。如果该 年没有举办世界杯，则输出：没有举办世界杯。  附：世界杯冠军以及对应的夺冠年份，请参考本章附录。 附录 （Map）在原有世界杯Map 的基础上，增加如下功能： 读入一支球队的名字，输出该球队夺冠的年份列表。 例如，读入“巴西”，应当输出 1958 1962 1970 1

    package homework001; import java.util.HashMap; import java.util.Scanner; public class Map { public s ...

  2. 对PostgreSQL xmin的深入学习

    当PostgreSQL需要insert 一条记录的时候,它会把记录头放入xmin,xmax等字段. xmin的值,就是当前的Transaction的TransactionId.这是为了满足MVCC的需 ...

  3. STL 源代码剖析 算法 stl_algo.h -- lower_bound

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie lower_bound(应用于有序区间) ------------------------- ...

  4. 06---Java基础、面向对象

    一.Java基础 1.Java概述 Java语言特点:                     简单性.解释性.面向对象.高性能.分布式处理                     多线程.健壮性.动 ...

  5. android118 上拉下拉刷新列表listView实现

    MainActivity.java package com.heima52.pullrefresh; import java.util.ArrayList; import com.heima52.pu ...

  6. C 栈实例

    就近匹配: 应用1:就近匹配 几乎所有的编译器都具有检测括号是否匹配的能力 如何实现编译器中的符号成对检测? #include <stdio.h> ][]; ]; p = a[]; ; 算 ...

  7. java_jdbc_batch处理_主键id获取

    //create1 速度较慢,create2较快,但是要根据数据库不同来决定 //ps = conn.prepareStatement(sql, Statement.RETURN_GENERATED_ ...

  8. git 客户端 代码下载与提交

    (1)git clone 服务器用户名@服务器IP:~/Git目录/.git 功能:下载服务器端Git仓库中的文件或目录到本地当前目录. (2)对Git目录中的文件进行修改. (3)git statu ...

  9. 可视化swing界面编辑--转载

    原文地址:http://279234058.iteye.com/blog/2200122 今天发现了一个WindowBuilder插件,功能好强大,啊哈哈,从此告别手动编辑swing界面代码,直接像V ...

  10. 使用HttpClient发送请求、接收响应

    使用HttpClient发送请求.接收响应很简单,只要如下几步即可. 1.创建HttpClient对象.  CloseableHttpClient httpclient = HttpClients.c ...