<!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. c# 文字首字母

    public string GetFirstLetter(string hz) { string ls_second_eng = "CJWGNSPGCGNESYPBTYYZDXYKYGTDJ ...

  2. Web服务端开发需要考虑的问题（续）

    方案汇总API设计应用架构代码库管理工具链工作计划目标预期关键过程service-driver接口定义及实现web样例 方案汇总 API设计 基于https. 只提供纯数据. 基于一开始提出的rest ...

  3. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  4. confluence + 禅道安装教程

    都是从网上拿的 1. 搭建confluence BE82-LO81-4O25-THDD AAABMQ0ODAoPeJxtkE1rwzAMhu/+FYadXepkYd3AsDQ2rCwfZUkHO7qp ...

  5. Android Error: This attribute must be localized.

    在android中使用mmm命令编译程序是出现错误. 这种问题一般情况是因为在res/xml文件夹下的中, 或者在res/layout下的文件中出现了没有多语言话的文本例. 解决方法: 不直接在布局文 ...

  6. 用ARM实现音乐电子相册

    (前段时间在做嵌入式的课程设计,特将学习心得整理如下) 一.开发工具及环境介绍 1.ARM处理器 ARM处理器是一个32位元精简指令集(RISC)处理器架构,其广泛地使用在许多嵌入式系统设计. ARM ...

  7. 第三百二十三节，web爬虫，scrapy模块以及相关依赖模块安装

    第三百二十三节,web爬虫,scrapy模块以及相关依赖模块安装 当前环境python3.5 ,windows10系统 Linux系统安装 在线安装,会自动安装scrapy模块以及相关依赖模块 pip ...

  8. Microsoft Jet 数据库引擎打不开文件，它已经被别的用户以独占方式打开，或没有查看数据的权限。

    System.Data.OleDb.OleDbException (0x80004005): Microsoft Jet 数据库引擎打不开文件'D:\wwwroot\gonghouxie\wwwroo ...

  9. TPshop标签

    很多cms 中有很多 标签, 商品标签 文章标签  列表标签  几十个标签, 让开发者头疼, 难记,  TPshop开发者考虑到这点, 用了一个万能标签, 开发者非常方便实用 TPshop万能标签只要 ...

  10. Linux SSH实现无密码远程登录

      一.      SSH无密码远程登录原理 二.      SSH实现无密码远程登录 实现主机A 无密码远程登录主机B 主机A   IP地址:10.8.9.154 主机B   IP地址:10.8.9 ...