<!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. sudo开发常用命令总结

    ansible ws -m "shell" -a "echo 'wangsong ALL=(ALL) NOPASSWD: /usr/local/bin/superviso ...

  2. mybatis example 使用AND 和OR 联合查询

    mybatis example 使用AND 和OR 联合查询 ViewPsmsgconsultExample example=new ViewPsmsgconsultExample(); ViewPs ...

  3. 再谈git的http服务-权限控制gitweb版（未成功）

    截至目前,对gitweb的掌握还没达到最终目标,仅仅实现了通过浏览器来浏览项目,通过git命令仍然未能clone项目.但仍然要记录下来,主要是因为打算暂时放弃这条路,而所收获的一些经验还是要记录下来. ...

  4. Navi.Soft31.WebMVC框架(含示例地址)

    1概述 1.1应用场景 互联网高速发展,互联网软件也随之越来越多,Web程序越来越被广泛使用.它部署简单,维护方便,深得众多软件公司使用 Bootstrap前端框架,是最近非常流行的框架之一.它简洁, ...

  5. python 读写配置文件

    使用python读写配置文件,写个demo测试一下. #!/usr/bin/env python import os import ConfigParser # 如果文件不存在,就穿件文件. if o ...

  6. 小知识：匿名类和lambda有什么区别？

    我只发现了关于this的区别: 匿名类的this,是指匿名类的实例对象. lambda的this,是指外部类的实例对象. 测试代码如下: /** * Created by LarryZeal on 2 ...

  7. c# 生成随机时间

    Random random = new Random((int)(DateTime.Now.Ticks)); ; ) { , ); , ); , ); string tempStr = string. ...

  8. 「下载神器」aria2 懒人安装教程 [Windows]

    是一款开源.轻量级的多协议命令行下载工具,支持 HTTP/HTTPS.FTP.SFTP.BitTorrent 和 Metalink 协议,拥有众多第三方支持插件,被誉为「下一代下载工具」和「下载神器」 ...

  9. CI框架 -- 创建类库

    当我们使用 “类库” 这个词的时候,通常我们指的是位于 libraries 这个目录下的那些类. 接下来我们将介绍 如何在 application/libraries 目录下创建你自己的类库,和全局的 ...

  10. Lemon OA第1篇：简单介绍

    官方网站:http://www.mossle.com/ 声明:我不是Lemon OA作者,只是分享好的资源.以下内容均代表个人见解~ 从官网说起 知道Lemon OA,也是最近研究Activiti,看 ...