<!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. 一些有用的js插件

    getfuelux.com  一系列插件合集 Ion.RangeSlider 超级牛的范围选择控件 Ion.CheckRadio Ion.Tabs Ion.Calendar Ion.ImageSlid ...

  2. WebRTC网关服务器单端口方案实现

    标准WebRTC连接建立流程 这里描述的是Trickle ICE过程,并且省略了通话发起与接受的信令部分.流程如下: 1) WebRTC A通过Signal Server转发SDP OFFER到Web ...

  3. JAVA三大框架SSH和MVC

    Java—SSH(MVC) JAVA三大框架的各自作用    hibernate是底层基于jdbc的orm(对象关系映射)持久化框架,即:表与类的映射,字段与属性的映射,记录与对象的映射 数据库模型 ...

  4. [maven] 项目不同环境自动打包

    应用背景 项目需要发布到本地环境,测试环境和生产环境甚至不同的生产环境上.这时候配置文件的一些参数需要被频繁的修改来修改去.为了解决这样的繁琐工作,就得使用maven profile特性. 步骤 1. ...

  5. Everything:速度最快的文件名搜索工具(Linux版本) 转

    Everything是windows的一个快速搜索工具. 基本上转移到Linux上来后,没有怎么用过. 一直在用Gnome-Do,感觉还可以. 这个程序只是用来练习wxPython用的,目前还只是一个 ...

  6. thinkphp 伪静态 自定义后缀

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...

  7. 关于Unity中粒子效果的使用

    粒子效果1: 游戏中会有很炫酷的特效,比如爆炸,水花,火焰等;2: unity提供粒子编辑器,方便特效人员来开发很炫酷的特效;3.粒子效果一般有专门的粒子特效师来做,我们只需要拿来用就好了,很多参数没 ...

  8. Unity如何内置Visual Studio

    一.问题的起源 软件环境:Unity 2017.3.0f3,Visual Studio 2013 问题描述:在Unity中创建C#脚本后,准备双击打开进行编辑时,出现了Fatal Error. 二.问 ...

  9. redis实现区间查询

    ###redis实现区间查询 在实际开发中经常遇到这样需求:服务端对于客户端不同的版本区间会做些不同的配置,那么客户端一个版本过来怎么快速的定位是属于哪个版本区间呢?可以利用`Sorted Sets` ...

  10. CI框架 -- 配置文件config.php

    application/config/config.php 文件 $config['base_url'] = "http://www.baidu.com/". 您网站的网址,Cod ...