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():插入一个外 ...
随机推荐
- 通过Shell脚本来创建批量服务器上的MySQL数据库账号
1.项目背景 因监控需要,我们需要在既有的每个MySQL实例上创建一个账号.公司有数百台 MySQL 实例,如果手动登入来创建账号很麻烦,也不现实.所以,我们写了一个简单的shell脚本,用来创建批量 ...
- 转载：wepy框架入门
转载:https://www.jianshu.com/p/93d5a4b99777 安装 wepy 命令行工具. npm install wepy-cli -g 在开发目录生成开发DEMO. wepy ...
- node.js守护进程问题的解决
最近自己写了一个node.js来读取redis数据,编写完成后按理来说加& 应该是有效的 nohup node redis.js & 但是每次关闭终端后这个进程就自动停止了,百度了下 ...
- Python 获 Mozilla 和扎克伯格夫妇 40 余万美金资助
Python 软件基金会近日发文宣布,收到来自 Mozilla Corporation 和 Chan Zuckerberg Initiative(CZI)的资金赞助,共计 407,000 美元.这笔款 ...
- Linux 和 Windows 查看当前运行的 python 进程及 GPU、CPU、磁盘利用率
目录 查看当前 python 进程 Linux Windows 查看 GPU 利用率 Linux Windows Linux CPU 利用率 Linux 磁盘利用率 查看当前 python 进程 Li ...
- ACWING 844. 走迷宫
地址 https://www.acwing.com/problem/content/description/846/ 给定一个n*m的二维整数数组,用来表示一个迷宫,数组中只包含0或1,其中0表示可以 ...
- ClickHouse
ClickHouse 是俄罗斯的Yandex于2016年开源的列式存储数据库(DBMS),主要用于在线分析处理查询(OLAP),能够使用SQL查询实时生成分析数据报告 1 安装前的准备1.1 Cent ...
- Nginx与keepalived实现高可用
主keepalived设置 #安装keepalived [root@localhost ~]# yum -y install keepalived #安装nginx [root@localhost ~ ...
- nacos+springboot的多环境使用方法
这里通过namespace的方法来实现,其他的没成功. 添加依赖 <dependency> <groupId>com.alibaba.boot</groupId> ...
- 【转】理解ASP.NET Core验证模型(Claim, ClaimsIdentity, ClaimsPrincipal)不得不读的英文博文
这篇英文博文是 Andrew Lock 写的 Introduction to Authentication with ASP.NET Core . 以下是简单的阅读笔记: -------------- ...