/* 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;的更多相关文章

  1. iOS开发之AutoLayout中的Content Hugging Priority和 Content Compression Resistance Priority解析

    本篇博客的内容也不算太复杂,算是AutoLayout的一些高级的用法.本篇博客我们主要通过一些示例来看一下AutoLayout中的Content Hugging Priority以及Content C ...

  2. 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 ...

  3. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

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

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

  5. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  6. HTML连载53-网易注册界面实战之content的头部、content注册信息

    一. 这次完成了content部分的右边图片以及content的top部分的边角填充 <!DOCTYPE html> <html lang="en"> &l ...

  7. PermGen space 与 Java heap space

    1.java.lang.OutOfMemoryError: PermGen spacePermGen space的全称是Permanent Generation space,是指内存的永久保存区域Ou ...

  8. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  9. CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...

  10. CSS3实战之content

    为元素添加内容 content属性术语内容生成和替换模块,该属性能够为指定元素添加内容. 取值如下 normal:默认值 string:文本内容 attr():插入元素的属性值 uri():插入一个外 ...

随机推荐

  1. Linux 和 Windows 查看 CUDA 和 cuDNN 版本

    目录 Linux 查看 CUDA 版本 查看 cuDNN 版本 Windows 查看 CUDA 版本 查看 cuDNN 版本 References Linux 查看 CUDA 版本 方法一: nvcc ...

  2. RabbitMQ学习笔记（五、RabbitMQ集群）

    目录: RabbitMQ集群 镜像队列 RabbitMQ服务日志 RabbitMQ分布式部署 高可用集群 RabbitMQ集群: 1.集群中组件的状态 首先MQ一定要是一个高可用的中间件所以集群肯定是 ...

  3. UVA 12165 Triangle Hazard

    https://cn.vjudge.net/problem/UVA-12165 题目 给出D.E.F分BC,CA,AB的比$m_1:m_2$,$m_3:m_4$,$m_5:m_6$和PQR三点的坐标, ...

  4. Intellj IDEA 快捷键冲突

    Intellij IDEA快捷键冲突 [问题描述]: ctr + alt + 方向键 与系统的快捷键冲突,按快捷键,屏幕方向发生改变. [解决办法]: ctr + alt + F12 调用出Intel ...

  5. python中append的使用

    没有系统地学习过python,最近在append的使用上遇到了大问题,吃到了苦头 之前一直单纯地认为通过append把数添加到list中,不需要提前开空间,非常便利,但却没有意识到这个过程并不是值传递 ...

  6. 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 1

    如今的项目开发中,接口是很普遍的应用技术.现在好多项目组都单独设有接口开发人员.像腾讯.微博.淘宝等开放平台,其所谓的开放,就是提供一些可调用的接口,用于获取相关的信息.例如,微信用户基本信息.淘宝店 ...

  7. ActiveMQ是什么，为什么使用MQ

    是基于 Java 中的 JMS 消息服务规范实现的一个消息中间件. 1.系统解耦 采用中间件之后,就可以完美解决上述中因为耦合可能导致的问题.系统 A 不用去 关心下层服务调用方的问题. 2. 异步调 ...

  8. 转载：ubuntu下编译安装nginx及注册服务

    原文地址:https://www.cnblogs.com/EasonJim/p/7806879.html 安装gcc g++的依赖库 sudo apt-get install build-essent ...

  9. 天天向上的力量python（举一反三）

    天天向上的力量python实例(举一反三) 实例1: 一年365天,以第1天的能力值为基数,记为1.0,当好好学习时能力值相比前一天提高0.1%,没有学习实能力值相比前一天下降0.1%. 问:每天努力 ...

  10. python基础(28):isinstance、issubclass、type、反射

    1. isinstance和issubclass 1.1 isinstance isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object): pa ...