/* 运用在父级元素上  align-content:   它通产与子元素的div{margin:10px 一起联合使用 }*/

ps==>用在子项出现换行的情况下，并是多行的情况下哦。运用在子项在侧轴上的排列方式。

align-content: flex-start ; 顶部对齐（默认值）
align-content:center; 垂直方向上居中 
align-content: flex-end交叉轴的终点对齐(与底部对齐)。
 align-content:space-around
第一个子元素距离顶部的距离==最后一个子元素距离底部的距离
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等
巧记：around 是四周，说明四周是有间距的。

justify-content: space-between;
运用在父级元素上
第一个子元素和最后一个子元素 分别靠在最顶部和最底部
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离上下两边的间距都是相等

justify-content 通常和 子元素中的div{margin:10px} 联合使用的 （重点 重点） 

通过对比可以发现align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果,而在我们日常开发中用的比较多的就是align-items.

#main {

    width: 800px;

    height: 300px;

    border: 1px solid #c3c3c3;

    display: flex;

    flex-wrap: wrap;

    align-content: center;

}

#main>div{

    width: 150px;

    height: 100px;

    background: #0099FF;

    margin: 10px;

}

</style>

</head>

<body>

<div id="main">

  <div style="background-color:coral;">11</div>

  <div style="background-color:lightblue;">22</div>

  <div style="background-color:pink;">33</div>

  <div style="background-color:olive;">4</div>

  <div style="background-color:coral;">55</div>

  <div style="background-color:lightblue;">66</div>

</div>

align-content: flex-start;

align-content: flex-end;

align-content: space-around;

04-align-content 它对于当单行是没有效果的的更多相关文章

  1. Android 数据存储04之Content Provider

    Content Provider 版本 修改内容 日期 修改人 V1.0 原始版本 2013/2/25 skywang 1 URI 通用资源标志符(Universal Resource Identif ...

  2. Align Content Properties

    How to align the items of the flexible element? <!DOCTYPE html> <html lang="en"&g ...

  3. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

  4. CSS content换行实现字符点点点loading效果

    CSS代码如下: dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: ...

  5. CSS content换行技术实现字符animation loading效果

    一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...

  6. Android单行跑马灯效果实现

    参考网址:https://www.jianshu.com/p/e6c1b825d322 起初,使用了如下XML布局: <TextView android:id="@+id/tv_per ...

  7. AutoLayout学习之理解intrinsicContentSize，Content Hugging Priority，Content Compression Resistance Priority

    TableViewCell的高度计算应该是所有开发者都会使用到的东西,之前都是用代码计算的方法来计算这个高度.最近有时间看了几个计算Cell高度的方法.基本上都用到了AutoLayout,这篇首先介绍 ...

  8. CSS Content 属性

    content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...

  9. 如何在Ubuntu 16.04中创建GIF动图

    导读 FFmpeg 是一款开源的音.视转换器,使用 FFmpeg 我们可以非常容易地转换和录制音视频文件,而 ImageMagick 是一款用于创建.编辑和合并位图图像的一款开源软件. 大家经常在新浪 ...

随机推荐

  1. ERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/Library/Python/2.7/site-packages/itsdangerous' Consider using the `--user` option or check the permissions

    近期练习flask写个blog, 安装flask扩展时 pip install Flask-WTF 报ERROR: Could not install packages due to an Envir ...

  2. Scrapy的Spider类和CrawlSpider类

    Scrapy shell 用来调试Scrapy 项目代码的 命令行工具,启动的时候预定义了Scrapy的一些对象 设置 shell Scrapy 的shell是基于运行环境中的python 解释器sh ...

  3. Linux 内核虚拟地址到物理地址转换讨论【转】

    转自:https://blog.csdn.net/sunlei0625/article/details/59476987 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请 ...

  4. 2-2 远程管理命令-网卡和IP地址的概念

    02.查看或配置网卡信息 序号 命令 对应英文 作用 01 ifconfig configure a network interface 查看/配置计算机当前的网卡配置信息 02 ping ip地址 ...

  5. Codeforces Round #578 (Div. 2)

    Codeforces Round #578 (Div. 2) 传送门 A. Hotelier 暴力即可. Code #include <bits/stdc++.h> using names ...

  6. 【西北师大-2108Java】第八次作业成绩汇总

    [西北师大-2108Java]第八次作业成绩汇总 作业题目 面向对象程序设计(JAVA)--第10周学习指导及要求 实验目的与要求 (1)掌握java异常处理技术: (2)了解断言的用法: (3)了解 ...

  7. seq参数 RANDOM 参数 openssl参数 cut参数

    #seq命令用于以指定增量从首数开始打印数字到尾数 语法: [2] seq [选项] 首数 尾数 [3] seq [选项] 首数 增量 尾数选项: seq 实例 一 存入数据库 然后 输出数据库的代码 ...

  8. 【洛谷5072】[Ynoi2015] 盼君勿忘（莫队）

    点此看题面 大致题意: 一个序列,每次询问一个区间\([l,r]\)并给出一个模数\(p\),求模\(p\)意义下区间\([l,r]\)内所有子序列去重后值的和. 题意转化 原来的题意看起来似乎很棘手 ...

  9. Luogu P5368 [PKUSC2018]真实排名

    老年选手只会做SB题了(还调了好久) 很容易想到分类讨论,按第\(i\)个人有没有翻倍来算 若\(a_i\)未翻倍,显然此时将\([0,\lceil \frac{a_i}{2}\rceil)\)的数和 ...

  10. JavaScript中如何判断数组类型

    前言 JavaScript中关于数组的判定问题,一直都是一个必须要掌握的点,那么,运用知识,如何判断一个类型是数组,就需要有对JavaScript使用有着深入的了解. 判断方法 一.Array.isA ...