01-CSS3-justify-content: space-around; justify-content: space-between;
/* justify-content: space-around;
运用在父级元素上
第一个子元素距离左边的距离==最后一个子元素距离右边的距离
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等
巧记：around 是四周，说明四周是有间距的。
*/
/* justify-content: space-between;
运用在父级元素上
第一个子元素和最后一个子元素 分别靠在最左和最右
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等
*/
<style>
*{
padding: 0;
margin: 0; }
ul{
list-style: none;
width:100%;
background: orchid;
}
ul{
display: flex;
justify-content: space-around;
}
ul>li{
width: 180px;
height: 100px;
background: pink;
} </style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
justify-content: space-between;如下
01-CSS3-justify-content: space-around; justify-content: space-between;的更多相关文章
- iOS开发之AutoLayout中的Content Hugging Priority和 Content Compression Resistance Priority解析
本篇博客的内容也不算太复杂,算是AutoLayout的一些高级的用法.本篇博客我们主要通过一些示例来看一下AutoLayout中的Content Hugging Priority以及Content C ...
- Inaccurate values for “Currently allocated space” and “Available free space” in the Shrink File dialog for TEMPDB only
转载自:http://blogs.msdn.com/b/ialonso/archive/2012/10/08/inaccurate-values-for-currently-allocated-spa ...
- 5.css3盒模型--margin/border/padding/content
1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...
- AutoLayout学习之理解intrinsicContentSize，Content Hugging Priority，Content Compression Resistance Priority
TableViewCell的高度计算应该是所有开发者都会使用到的东西,之前都是用代码计算的方法来计算这个高度.最近有时间看了几个计算Cell高度的方法.基本上都用到了AutoLayout,这篇首先介绍 ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- HTML连载53-网易注册界面实战之content的头部、content注册信息
一. 这次完成了content部分的右边图片以及content的top部分的边角填充 <!DOCTYPE html> <html lang="en"> &l ...
- PermGen space 与 Java heap space
1.java.lang.OutOfMemoryError: PermGen spacePermGen space的全称是Permanent Generation space,是指内存的永久保存区域Ou ...
- CSS3 justify 文本两端对齐
浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...
- CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
- CSS3实战之content
为元素添加内容 content属性术语内容生成和替换模块,该属性能够为指定元素添加内容. 取值如下 normal:默认值 string:文本内容 attr():插入元素的属性值 uri():插入一个外 ...
随机推荐
- 关于Linux下进程的详解【进程查看与管理】
一.关于进程 进程: 已经启动的可执行程序的运行实力 进程的组成:一个进程包含内核中的一部分地址空间和一系列数据结构.其中地址空间是内核标记的一部分内存以供进程使用,而数据结构则用来纪录每个进程的具体 ...
- Python进阶基础学习(多线程)
Python进阶学习笔记(一) threading模块 threading.thread(target = (函数)) 负责定义子线程对象 threading.enumerate() 负责查看子线程对 ...
- Log4j2之ThreadContext
简介 系统中使用log4j2作为日志系统,然而在高并发的情况下,多次请求的日志参杂在一起,要跟踪某个用户一次的请求操作所有日志是很麻烦的.幸运的是log4j中有相应的解决方案. NDC和MDC NDC ...
- 职位画像分析(pandas/ matplotlib)
一.数据分析的步骤 二.提出问题 (1) 分析数据分析师主要的技能排名? (2) 分析数据分析师薪资和岗位地点.学历.工作年限的关系? (3) 数据分析师的学历需求? (4) 不同城市数据分析师的需求 ...
- Python画一棵漂亮的樱花树（不同种樱花+玫瑰+圣诞树喔）
不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成喔~)one 樱花树 动态生成樱花效果图(这个是动态的) ...
- 大话设计模式Python实现-单例模式
单例模式(Singleton Pattern):保证类仅有一个实例,并提供一个访问它的全局访问点. 下面是单例模式的demo: #!/usr/bin/env python # -*- coding:u ...
- Ajax和跨域请求
Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...
- SpringBoot系列之@PropertySource用法简介
SpringBoot系列之@PropertySource用法简介 继上篇博客:SpringBoot系列之@Value和@ConfigurationProperties用法对比之后,本博客继续介绍一下@ ...
- 使用pytorch时所遇到的问题总结
使用pytorch时所遇到的问题总结 1.ubuntu vscode切换虚拟环境 在ubuntu系统上,配置工作区文件夹所使用的虚拟环境.之前笔者误以为只需要在vscode内置的终端上将虚拟环境切换过 ...
- 从新手小白到老手大白的成长之路第二弹-WPF之UI界面之Grid面板
废话不多说,接下来直接开始介绍WPF-UI界面-Grid面板 如图就是创建好了的一个WPF项目,整个界面被一个Window窗体包含起来,上面类似于什么什么网址什么的其实就相当于.net的命名空间,缺什 ...