<!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. 华为手机使用objectAnimation异常

    在一个recyclerView上实现item的立体翻转动画,魅族.小米.华为平板都试过了没问题,但是在一个7.0的华为手机上,只要一翻转item就消失了,网上发现也有其他人遇到这种问题,大概是obje ...

  2. Sword protobuf学习二

    编写protobuf消息文件 文件格式: xxx.proto //标明使用哪个版本的protobuf,默认2.0版本 syntax = "proto3"; //类似于c++中的na ...

  3. How to properly release Excel COM objects

    Posted on Tuesday, November 5th, 2013 at 7:18 am by Pieter van der Westhuizen.     You’ll see a lot ...

  4. ubuntu eclipse&JDK

    1. 下载jre,eclipse,cdt 其中jre是java运行环境,eclipse需要先装jre,才可能运行,cdt是在eclipse中运行c\c++程序的插件. 1.1 下载jre 网址是:ja ...

  5. USB学习笔记连载（七）：CY7C68013A 无法识别的可能原因

    最近一直在调试视频 采集卡,和PC端连接的是USB接口,使用的是cypress的CY7C68013A-56PVXC. //======================================= ...

  6. thinkphp 伪静态 自定义后缀

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

  7. 关于Unity中变量和函数的定义

    变量 1.匀速运动的物体都要记得定义一个speed速度变量 2.不断产生很多相同物体的事件要记得定义时间生成物体的间隔rate,并且有一个一达到rate的值就清0的累加时间变量,累加时间变量是通过Ti ...

  8. 【HTML】div居中显示

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  9. Java如何处理已检查异常？

    在Java编程中,如何处理已检查异常? 此示例显示如何使用catch块处理已检查的异常. package com.yiibai; public class HandleCheckedException ...

  10. JDBC更新数据实例

    在本教程将演示如何在JDBC应用程序中,更新数据库的一个表中数据记录. 在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员权限,以在给定模式的数据库表中更新数据记录. 要执行以下示例, ...