/* 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. html 初识 文档结构 常用标签

    HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...

  2. Linux数据库的创建 导入导出 以及一些基本指令

    首先linux 下查看mysql相关目录 查看 mysql 的安装路径 执行查询 SQL mysql>show variables like '%dir%'; datadir 就是数据路径 确定 ...

  3. 小程序登录解密用户数据encryptedData -41001: encodingAesKey 非法

    问题: 做小程序微信授权登录,先获取code,然后去获取到session_key和open_id,再拿到encryptedData,传到服务器去解密拿到用户信息,但是有时成功,有时返回-41001错误 ...

  4. 设置API：wx.openSetting,wx.getSetting使用说明(示例：地图授权与取消授权后的重新授权)

    这个API解决了过去一个长久以来无法解决的问题,如何让用户重复授权: 打开小程序的设置界面:就是主动调取授权 目前资料极少,但是已经可以让大家先看看了: 官方文档地址:https://mp.weixi ...

  5. java8-14-时间API

    原来的时间类  1.默认值 我们使用起来不方便 2.在不同包 不规范   在java.util和java.sql的包中都有日期类,此外用于格式化和解析的类在java.text包中定义 3.可变  线程 ...

  6. 201871010101-陈来弟《面向对象程序设计（java）》第一周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  7. 关于git远程

    1.注册github的账户(官网;github.com ) 2.新建一个项目(在右上角点击+,选择New repository ),输入项目名和项目描述,其他可根据自己项目选填,创建完成后可查看到ht ...

  8. 《大数据技术应用与原理》第二版-第二章大数据处理架构Hadoop

    2.1概述 Hadoop是Apache旗下的开源分布式计算平台,是基于Java开发的,具有很好的跨平台特性,其中核心文件是MapReduce和HDFS,而HDFS是根据谷歌文件系统GFS开源实现,是面 ...

  9. Codeforces Round #594 (Div. 1) D. Catowice City 图论

    D. Catowice City In the Catowice city next weekend the cat contest will be held. However, the jury m ...

  10. workbook数据相关操作

    访问单个单元格 c = ws['A4'] #返回单元格A4,如果单元格不存在,则会自动创建 ws['A4'] = 4 #为单元格A4赋值为4 d = ws.cell(row=4, column=2, ...