Flexible 弹性盒子模型之CSS justify-content 属性

xingyunchen 2017-01-16

实例

在弹性盒对象的 <div> 元素中的各项周围留有空白：

  1. div
  2. {
  3. display: flex;
  4. justify-content: space-around;
  5. }
复制
效果预览

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

justify-content29.0
21.0 -webkit-		11.028.0
18.0 -moz-		9.0
6.1 -webkit-		17.0

定义和用法

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

flex-start
否
否。请参阅 CSS3动画属性、CSS3动画实例。
CSS3
object.style.justifyContent="space-between" 效果预览

CSS 语法

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值

flex-start默认值。项目位于容器的开头。效果预览
flex-end项目位于容器的结尾。效果预览
center项目位于容器的中心。效果预览
space-between项目位于各行之间留有空白的容器内。效果预览
space-around项目位于各行之前、之间、之后都留有空白的容器内。效果预览
initial设置该属性为它的默认值。请参阅 initial。效果预览
inherit从父元素继承该属性。请参阅 inherit。
xingyunchen

xingyunchen

相关推荐

Ubuntu 安装Docker

Unbutu系统上安装Docker服务，为保证docker服务的运行未定，需要使用与之相匹配的docker版本，使用命令。若看到上述信息，表明docker安装成功！默认情况下，docker从hub上下载需要安装的进行，囿于这些hub位于国外，下载速度缓慢，

pigsmall / 0评论 2020-11-19

jackson gson

private static final ObjectMapper objectMapper = new ObjectMapper();

SXIAOYI / 0评论 2020-09-16

20个CSS快速提升技巧

本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来

Ladyseven / 0评论 2020-07-25

spring cloud 知识点

spring cloud 是一系列框架的有序集合。它利用 spring boot 的开发便利性巧妙地简化了分布式系统基础设施的开发，如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等，都可以用 spring boot 的开发风格做到一键启动和

whileinsist / 0评论 2020-06-24

HTML中怎么使文字各种居中对齐？（代码示例）

本篇文章主要介绍了如何去写关于html文字居中代码。希望对有需要的朋友有所帮助。前端10K面试准备，最完整面试真题分享（含答案）！text-align 属性规定元素中的文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 just

gufudhn / 0评论 2020-06-12

css中元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法，并且按照实现的时间线，从css2到css3的各种解决方案，从代码量有少到多的排序来一一说明每种布局方法的实现方式，通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。line-height：用于设置多行元素的空间量

冰蝶 / 0评论 2020-06-05

云计算交付模型知多少 - IaaS、PaaS、SaaS

对于互联网公司而言，迁移到云是一个明智的决定。它减少了总的成本支出，同时最大限度地提高了工作效率和生产率，本文将指出迁移到云或者建设私有云优缺点以及边界在哪里？本地通常是提前把软件基础架构部署在用户计算机上，所有资源使用者自己访问和管理; 相对于本地服务，

LinuxAndroidAI / 0评论 2020-06-04

Spring Cloud 和 Dubbo 哪个会被淘汰？

今天看到了这样一个问题：Spring Cloud 和 Dubbo哪个会被淘汰？看了几个回答，都觉得不在点子上，所以要么就干脆写篇小文瞎逼叨一下。时至今日，这两个框架放到现在，已经不存在谁取代谁这一说了。不论从Spring Cloud用户来说，还是Dubbo

supperme / 0评论 2020-05-28

css中vertical-aling与line-height

x-height: 字母x的高度，vertical-aling设置为middle的时候，对齐的是baseline往上1/2的x-height，所以vertical-aling设置为middle不是整正的居中对齐。最终的计算值是和当前 font-size 相

yaodilu / 0评论 2020-05-10

CSS中的line-height和vertical-height

line-height 设置的是行高，指的是段落中每行文字间的距离。一般来说，将 line-height 设置为 div 元素的高度，则 div 内部的文字将会垂直居中显示。line-height 与 font-size 的计算值之差分为两半，分别加到一行

e度空间 / 0评论 2020-04-27

CSS行高——line-height

底线和顶线包裹的区域，实际中不一定看得到，但却是存在。以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。<p style="font-size:20px;line-height:2em;">字高20px，行高2e

云端漂移 / 0评论 2020-04-09

js正则表达式

javascript 正则表达式 和 java perl 等的有些不一样，比如没有后向预查等。不过不能得到匹配的位置。即如果加了全局g标志，正则表达式的分组信息将丢失。这是一种特殊的构造方式。并且注意这里的正则表达式不需要像用字符串构造RegExp 对象那

peterwzc / 0评论 2020-03-17

jQuery EasyUI视频教程，更新到第20课

由于我也是上班族，也是个程序猿，所以我打算一周左右出一集，大家不要催我，毕竟我业余时间也不是很多。还有本人英文也不咋的，讲解的时候有什么错误欢迎指出，共同学习。大家支持一下，注册一下，给论坛增加一点人气。所以隐藏了下载地址，请回复支持吧```视频是用屏录专

有心就有方向 / 0评论 2012-09-03

转: 7 款华丽的 jQuery/CSS3 效果及源码

很久没有和大家分享精美的jQuery/CSS3应用了，这两天有时间收集了几款新发布的jQuery/CSS3插件，于是就分享给大家，如果喜欢的话请向你的朋友和同事推荐吧。在线演示 /源码下载2、CSS3带头像3D下拉菜单这款CSS3下拉菜单设计富有创意，菜单

ebuild / 0评论 2013-05-14

编写高效的JavaScript程序

一个基本的编译器，在代码执行前分析JavaScript、生成本地机器代码而非执行字节代码或是简单的解释，该段代码之初不是高度优化的。V8用对象模型“表述”对象。在JavaScript中，对象是一个关联数组，但是V8中，对象被“表述”为隐藏类，这种隐藏类是V

donghedonghe / 0评论 2013-05-31

svn c命令

大数据资料共享。

ganyouxianjava / 0评论 2012-05-31

(转载)无联网情况下如何让MyEclipse 识别 spring-beans-2.5.xsd 文件

使用myeclipse开发spring，在编写配置文件的时候可能遇到无法使用帮助，来自动添加xml元素的问题，是因为无法查找spring的DTD描述。这里做个记录手工添加DTD的方法window--》preferences--》MyEclipse--》Fi

tdeclipse / 0评论 2011-02-28

linux top 命令

最近用LR做性能测试，遇到一个问题，就是当系统压力大时，用LR通近RPC协议监控压测服务器经常会挂掉，这样就监控不到服务器的性能情况。同时，我一般用top在后台观察服务器性能，但是需要时刻查看，因为系统默认是1S更新一次,不能保存服务器性能。top是一个动

linuxprobe0 / 0评论 2013-04-15

linux下安装与卸载JDK1.6

Sun Microsystems, Inc. Binary Code License Agreement for theJAVATM 2 SOFTWARE DEVELOPMENT KIT , STANDARDEDITION, VERSION 1.4.2_X

linuxprobe0 / 0评论 2013-04-01

centos 内网校时

定时较准时间：# crontab -e //打开linux定时计划任务0 23 * * * /usr/sbin/ntpdate 210.72.145.44 //时间格式如下：如果23改为0-23/2 就表示每隔2小时执行一次* * * * * *| |

83560193 / 0评论 2013-06-25

Linux查看目录大小及文件数量命令

[[email protected]]# find /www/xker.com -type f |wc -l. [[email protected]]# find /www/xker.com -type d |wc -l

kidneybeans / 0评论 2013-06-17

lfs 编译错误总结

不知道如何解释，另外在之前的binutils编译过程中make结果中出现诸如Nothing to be done for "...." 虽然没有显示error，但是总感觉有点问题，到后面的话是会出现问题，有些人说只要不报错就继续，我实在

加菲猫园 / 0评论 2013-06-16

Linux快捷键

下述所有命令在Linux/unix的shell下有效，这里以bash为主。如有出入，以你自己的服务器为准。本文所指的Linux主要指 RHEL/CentOS，unix指的是FreeBSD，这也是服务器中用得最多的版本。重复执行最后一条命令 history

zfyaixue / 0评论 2013-06-14

linux IO信息查看（一）

可以看到我们这里采用的是cfq.同时也能看出当前系统支持的调度算法，如2.6内核的四种调度算法，其中用[]标识的是当前使用的调度算法。Completely Fair Queuing 在 2.6.18 取代了 Anticipatory scheduler

xpsallwell / 0评论 2013-07-27

Linux的核心编译，kernel

2kernel负责整个硬件的驱动，和提供各种核心功能。此文件包含各项硬件侦测程序和驱动模块。4核心模块，有些功能没有集成在核心中，编译成模块以便核心随时加载。5 核心的版本，主版本.次版本.发布版本-修改版本。7 建议将核心源代码放置在/usr/src/k

benico / 0评论 2013-07-23

linux设置密码

ubuntu默认root密码安装完Ubuntu后忽然意识到没有设置root密码，不知道密码自然就无法进入根用户下。到网上搜了一下，原来是这麽回事。Ubuntu的默认root密码是随机的，即每次开机都有一个新的root密码。我们可以在终端输入命令 sudo

旭灿 / 0评论 2013-07-23

JavaEE项目中的utf-8编码

同时，浏览器也是根据这个参数来对其接收到的数据进行重新编码。所以对于POST表单提交的数据，在获得数据的JSP页面中request.setCharacterEncoding要和生成提交该表单的JSP页面的 response.setCharacterEnco

GATSBYER / 0评论 2014-07-13

redis 的环境搭建 （win和linux下）

感觉这东西跟mongodb差不多，安装和配置挺简单。下载地址：https://github.com/dmajkic/redis/downloads下载下来的包里有两个， 一个是32位的，一个是64位的。打开一个cmd窗口 使用cd命令切换目录到C:\red

尹小鱼 / 0评论 2014-07-13

Solr入门之SolrServer实例化方式

随着solr版本的不断升级, 差异越来越大, 从以前的 solr1.2 到现在的 solr4.3, 无论是类还是功能都有很大的变换, 为了能及时跟上新版本的步伐, 在此将新版本的使用做一个简单的入门说明:. SolrServer实例化类型有httpClie

年轻就要对味 / 0评论 2014-07-11

solr in action翻译-第二章了解Solr2.3

直觉上,排序是有道理的,因为查询词iPod发生三次列出的第一个文档,两次名字和曾经的功能;它只发生一次其他文件。分数的数值字段本质上不是有意义的;这只是内部使用Lucene相对排名,不具有可比性不同的查询。现在,改变你的查询到iPod权重^ 2,增加查询条

etnahh / 0评论 2014-07-11

solr in action翻译-第二章了解Solr2.1

例如,Solr允许你大索引分成较小的子集,称为碎片,并将副本添加到增加服务查询的能力。你可能听说过SolrCloud和想知道Solr 4和SolrCloud之间的区别是什么。从技术上讲,SolrCloud是代号Solr 4特性的一个子集的更易于配置和运行一

向日葵Solros / 0评论 2014-07-11

solr in action翻译-第一章1.2

在本节中,我们介绍了Solr搜索应用程序设计的关键组件从地上起来。这将帮助您了解Solr提供特定的功能和他们的动机存在。Solr不是一个网络搜索引擎像谷歌或必应。一旦用户执行一个查询,可以进一步使用Solr的分类结果分类显示特性的支持文档的结果集。房地产而

向日葵Solros / 0评论 2014-07-10

Nginx+Tomcat+Terracotta的Web服务器集群实做

-- //Host2就写为"test Host1" 以示区分 --></head><body><% out.println("Session Id:"+requ

稻草人的高粱地 / 0评论 2014-07-02

java连接oracle (odbc)

无论采用哪种方式连接oracle数据库创建一个WEB应用，首先通过图形界面化的方式创建数据库，默认情况下，数据库实例名和数据库名保持一致，在下面文件中可以查看到实例名称

黎俊杰的DBA生涯 / 0评论 2014-06-12

window下Nginx怎么安装启动

运行之后，怎么关闭呢，Nginx -s stop，即可。还有其他选项供选择：。Nginx -s quit 平稳关闭Nginx，保存相关信息，有安排的结束web服务。Nginx -s reload 因改变了Nginx相关配置，需要

smilebestSun / 0评论 2014-06-12

服务器负载均衡的基本功能和实现原理

负载均衡设备作为纵跨网络2-7层协议的设备，往往放置在网络设备和应用设备的连接处，对工程师在网络和应用基本知识方面的要求远高于其他设备，所以我们要在基本功能的理解上下更多的功夫。负载均衡设备还有另外一个称呼：4/7层交换机，但它首先是个2-3层交换机，这要

Imperva / 0评论 2014-05-30

关于分布式系统的数据一致性问题

数据更新的消息是通过一台中心的MQ进行转发。先把问题简单化处理，假设A增加一条记录Message_A，发送到M，B增加一条记录 MESSAGE_B发送到M，都是通过MQ服务器进行转发，那么M系统接收到条消息，增加两条数据，那么M在把增加的消息群发给A，B，

xusong / 0评论 2014-05-17

关于一个大型web系统架构设计和技术选型的讨论摘录

看到了你在应用前端采用了F5，我个人不是很赞同这个方案，虽然F5是一个好的L4产品，也能基于第7层做负载均衡和容灾。同样，一个web，访问后端一个请求，这个请求中需要3个EJB，那么极有可能把这3个请求分发到不同的服务器，又造成了分布式事务。提高用户使用的

daillo / 0评论 2014-05-10

原来面试的时候写精通Glide，这样问我这样答

5 、自己去实现图片库，怎么做？8 、Glide 内存缓存如何控制大小？当调用LruCache的 get 方法时，LinkedHashMap会调用recordAccess方法将此元素加到链表头部。三丶Glide 使用什么缓存？

89764715 / 0评论 2019-12-06

SQLite关于数据类型

一般数据采用固定的静态数据类型，而SQLite采用的是动态数据类型，会根据存入值自动判断。interger 32 位元的整数。float 32位元的实数。char n 长度的字串，n不能超过 254。date 包含了 年份、月份、日期。timestamp

Plant / 0评论 2012-06-28

微信H5页面前端开发，大多数人都会遇到的几个兼容性坑

最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。

颤抖吧腿子 / 0评论 2019-12-05

Js中对外部js文件的引用顺序直接影响到未定义的问题

　　每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。　　变量的调用，必须是前面已经声明，否则获取的变量值是undefined。[CDATA[　　 aa(); //浏览器报错　　 //]]></script>　　 <scr

zfszhangyuan / 0评论 2013-09-12

freemarker中整数格式定义

exists><#setting number_format="#">2.怎么遍历输出1）在Action里把ArrayList放到值栈里private ArrayList<PostBean> postLis

80183053 / 0评论 2013-09-12

log4j配置日志文件log4j.appender.R.File相对路径方法

方法二、可以使用服务器环境变量log4j的配置文件支持服务器的vm的环境变量，格式类似${catalina.home}log4j.appender.R=org.apache.log4j.RollingFileAppenderlog4j.appender.R

gaozhlzh / 0评论 2013-09-11

最常用和实用的CSS技巧

下面是CSS最常用和实用的技巧。设置自己的CSS样式表，就可以在您需要的时候直接的添加标记即可。不再对表的列和域进行约束，所以我们需要一些好用的CSS，在JeddHowden.com发现。<inputtype=”text”name=”first_na

lanzhusiyu / 0评论 2014-01-13

web页面重构怎么操作？

页面重构就是根据原有页面内容和结构的基础上，通过div+css写出符合web标准的页面结构。

yyNet0 / 0评论 2014-01-09

javaScript的性能优化

而现在Ajax则是最为流行的一种方式。而事实上，如何使用这两个循环，则有很大讲究。如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变

87453169 / 0评论 2014-01-17

国内优秀Web前端Javascript框架库汇总列表

p=1009，同时欢迎大家留言补充！如何选择适合你的前端开发框架？

糖黄 / 0评论 2014-01-16

Android 众多的布局属性详解

Android功能强大，界面华丽，但是众多的布局属性就害苦了开发者，下面这篇文章结合了网上不少资料，花费本人一个下午搞出来的，希望对其他人有用。EditText的android:hint 设置EditText为空时输入框内的提示信息。** 要注意一点，Dr

Tom天天 / 0评论 2013-07-12

UML类图关系（泛化 、继承、实现、依赖、关联、聚合、组合）

指的是一个类继承另外的一个类的功能，并可以增加它自己的新功能的能力，继承是类与类或者接口与接口之间最常见的关系；在Java中此类关系通过关键字extends明确标识，在设计时一般没有争议性；但总的来说，后几种关系所表现的强弱程度依次为：组合>聚合&g

jayhgq / 0评论 2013-07-11