<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: inline-flex;

    /* 默认值 ：整体左对齐*/

    /*justify-content: flex-start;*/

    /*整体居中对齐*/

    /*justify-content: center;*/

	/*整体右对齐*/

    /*justify-content: flex-end;*/

	/*子盒子平分多余空白*/

    /*justify-content: space-around;*/

	/*子盒子与子盒子之间，平分多余空白*/

    justify-content: space-between;

    width: 400px;

    height: 400px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    height: 100px;

    margin: 5px;

  }

  </style>

</head>

<body>

  <div class="flex-container">

    <div class="flex-item">flex item 1</div>

    <div class="flex-item">flex item 2</div>

    <div class="flex-item">flex item 3</div>

  </div>

</body>

</html>

flexbox父盒子justify-content属性的更多相关文章

  1. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox父盒子flex-wrap属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子flex-direction属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox子盒子align-self属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

  7. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  8. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  9. 行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释

    最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

随机推荐

  1. Redis客户端连接

    Redis接受上配置监听TCP端口和Unix套接字客户端的连接,如果启用.当一个新的客户端连接被接受,如有以下操作进行: 客户端套接字置于非阻塞状态,因为Redis的使用复用和非阻塞I/O操作. TC ...

  2. Java扫描classpath指定包路径下所有class

    在写框架时 经常需要扫描classpath指定包路径下带有某个Annotation的类,自己整理了一下 封装成一个工具类了,供大家参考. 源代码ClassPathResourceScanner.jav ...

  3. linux下安装redis并配置

    redis官网上给出了安装步骤,这里做一下总结. 1.Download, extract and compile Redis with: wget http://download.redis.io/r ...

  4. 工行金邦达USBKey 在Mac OS的 Parallels Desktop 的虚拟Win7出现“ PKCS11

    由于经常用到支付宝的工行付款,所以在我的mac os中安装了Parallels Desktop 7(Win7旗舰版),但随之而来的问题是,运行PD后,再插入工行的USBkey,运行工具箱后出现“PKC ...

  5. 利用altium怎么生成PDF及怎么1：1打印文档

    画完板子之后,还要生成原理图PDF文档,供其他设计人员参考和指正. 上图红框标注的两个地方,分别用于打印预览设置和生成原理图PDF.那么若是生成原理图PDF文档,则选择smart PDF即可. 点击s ...

  6. IDEA 在某个工程下一个module如何使用另一个module中的资源文件（.xml .prop等）

    问题如题,经google,解决方案有四种,选择了比较直观有效的一种罗列如下: 因为项目采用maven管理,所以我们可以在module2下的pom.xml制定<resources>的路径,让 ...

  7. Python——eventlet.wsgi

    eventlet 的 wsgi 模块提供了一种启动事件驱动的WSGI服务器的简洁手段,可以将其作为某个应用的嵌入web服务器,或作为成熟的web服务器,一个这样的web服务器的例子就是 Spawnin ...

  8. c# 连接mysql配置config，不用装net connector

    <system.data> <DbProviderFactories> <remove invariant="MySql.Data.MySqlClient&qu ...

  9. system.web下的HttpModules节点和system.webServer下的modules节点的配置区别

    [转]自定义HttpModule的一些经验--配置篇 自定义web模块,需继承System.Web.IHttpModule接口 一:拦截对该服务器所有的http请求. 第一步:将自定义module类使 ...

  10. JS性能细节学习初步总结

    1,声明变量要赋初值2,尽量避免声明全局变量,可以减少与系统的重名3,当编写大量js代码时,难免会遇到命名冲突,这是可以通过模拟命名空间方式     来避免冲突4,尽量避免使用全局变量,搜索全局变量是 ...