04-align-content 它对于当单行是没有效果的
/* 运用在父级元素上 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 它对于当单行是没有效果的的更多相关文章
- Android 数据存储04之Content Provider
Content Provider 版本 修改内容 日期 修改人 V1.0 原始版本 2013/2/25 skywang 1 URI 通用资源标志符(Universal Resource Identif ...
- Align Content Properties
How to align the items of the flexible element? <!DOCTYPE html> <html lang="en"&g ...
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
- CSS content换行实现字符点点点loading效果
CSS代码如下: dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: ...
- CSS content换行技术实现字符animation loading效果
一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...
- Android单行跑马灯效果实现
参考网址:https://www.jianshu.com/p/e6c1b825d322 起初,使用了如下XML布局: <TextView android:id="@+id/tv_per ...
- AutoLayout学习之理解intrinsicContentSize,Content Hugging Priority,Content Compression Resistance Priority
TableViewCell的高度计算应该是所有开发者都会使用到的东西,之前都是用代码计算的方法来计算这个高度.最近有时间看了几个计算Cell高度的方法.基本上都用到了AutoLayout,这篇首先介绍 ...
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- 如何在Ubuntu 16.04中创建GIF动图
导读 FFmpeg 是一款开源的音.视转换器,使用 FFmpeg 我们可以非常容易地转换和录制音视频文件,而 ImageMagick 是一款用于创建.编辑和合并位图图像的一款开源软件. 大家经常在新浪 ...
随机推荐
- bayaim_mysql5.6下table_open_cache参数
bayaim_mysql5.6下table_open_cache参数_2017年12月26日10:51:58 原创 作者:bayaim 时间:2017-12-26 10:57:17 1 0删除编辑 ( ...
- Scrapy的下载中间件
下载中间件 简介 下载器,无法执行js代码,本身不支持代理 下载中间件用来hooks进Scrapy的request/response处理过程的框架,一个轻量级的底层系统,用来全局修改scrapy的re ...
- 《数据挖掘导论》实验课——实验一、数据处理之Numpy
实验一.数据处理之Numpy 一.实验目的 1. 了解numpy库的基本功能 2. 掌握Numpy库的对数组的操作与运算 二.实验工具: 1. Anaconda 2. Numpy 三.Numpy简介 ...
- [ Python入门教程 ] Python生成随机数模块(random)使用方法
1.使用randint(a,b)生成指定范围内的随机整数.randint(a,b)表示从序列range([a,b])中获取一个随机数,包括b. >>> random.randint( ...
- 第04组 Beta冲刺(3/5)
队名:new game 组长博客 作业博客 组员情况 鲍子涵(队长) 过去两天完成了哪些任务 整理素材 接下来的计划 素材和脚本相连 引入声音素材 还剩下哪些任务 让游戏本体运行 遇到了哪些困难 时间 ...
- vscode常用快捷键与插件推荐
一.vscode常用快捷键 1.新建文件:chtr+n 2.新开窗口:ctrl+shift+n 3.分屏:ctrl+1/2/3 4.切换文件:alt+1/2/3或ctrl+tab 5.关闭当前窗口: ...
- 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 7
23.5 创建RESTful规范 WebAPI框架 虽然我们现在可以自己实现API了,也了解了RESTful API的设计原则,但让自己实现的API符合RESTful API规范,对很多刚接触API ...
- C# 通过反射调用 Func 委托
C# 通过反射调用 Func 委托 Intro 最近我的 NPOI 扩展库增加了,自定义输出的功能,可以自定义一个 Func 委托来设置要导出的内容,详细介绍请查看 https://www.cnblo ...
- Python中字符的编码与解码
1 文本和字节序列 我们都知道字符串,就是由一些字符组成的序列构成串,那么字符又是什么呢?计算机只能识别二进制的东西,那么计算机又为什么会显示我们的汉字,或者是某个字母呢? 由于最早发明使用计算机是美 ...
- sql 小全
前些日子sql用到哪里写到哪里,乱七八糟,今天整理了一下,以作备份(虽然开通博客已经八个月了,但是今天还是第一次发表博文,好紧张啊~~) --2014.08.27号整理sql语句 1:进入数据库 us ...