<!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. 【jquery】基于 jquery 的翻牌效果 flip

    最近做了个类似于塔罗牌翻牌的效果,分享给大家. <!doctype html> <html lang="en"> <head> <meta ...

  2. Android开发-新建线程崩溃

    一直不满意车机不能实现屏保,最近发现可以通过设置亮度实现,顾萌生了自己写程序的来实现的念头,遂修改原来练手的app.毕竟过去了1年,各类程序.sdk都已经更新了不知道多少版本.经历了痛苦的升级.更新, ...

  3. MWeb 的基本使用

    MWeb 的文档库模式和外部模式 MWeb 分为文档库模式和外部模式,下面分别说明. 文档库模式 软件一开始打开就是文档库模式了,开始时需要设置文档库保存的位置,之后所有文档都会保存在这个位置.文档库 ...

  4. JS DOM操作思维导图

  5. js在IE与firefox的差别。。。

    1.firefox不能对innerText支持.firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如 ...

  6. 关于Unity中的NGUI字体

    NGUI字体类型 1: UIFont字体,UIFont类实现的2: TTF动态字体的使用3: BBCode的特殊字体的使用4: NGUI字体制作5: BMFont字体制作和艺术字体的制作6: UILa ...

  7. 关于Unity中顶点片元Shader实例

    补充 float4 fixed4 _Time 1: float4是内置向量 (x, y, z, w); float4 a; 访问单独成员a.x, a.y, a.z, a.w;2: fixed4 是内置 ...

  8. qualcomm sdm450 tinymix mic record

    最近需要使用tinymix配置主MIC和副MIC进行录音,一般副MIC都是拿来降噪用的.记录一下副MIC录音的方法. 没有找到高通的音频通路图,只能通过logcat,查看audio_route,然后找 ...

  9. Java如何获得运行线程的优先级？

    在Java编程中,如何获得运行线程的优先级? 以下示例使用setPriority()方法打印正在运行的线程的优先级. package com.yiibai; public class GettingT ...

  10. Android 开源动画框架：NineOldAndroids

    介绍 Android 平台提供两种动画系统:Property Animation(Android 3.0引入)和View Animation.这两种动画都可供选择,但是Property Animati ...