justify-content属性：

用来表示可伸缩项目在主轴方向上的对齐方式；

取值范围为flex-start,flex-end,center,space-between,space-around；

其中flex-start,flex-end,表示相对于主轴起点和终点对齐，center表示居中对齐，space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配，space-around表示居中对齐然后在主轴方向上将剩余空间平均分配。

<!DOCTYPE html>

<html>

<head>

    <title>justify-content几个属性的学习</title>

</head>

<style>

    .flex-container1 {

        display: flex;

        width: 600px;

        height: 230px;

        background-color: #ccc;

        justify-content: space-between;

    }

    .flex-container2 {

        display: flex;

        width: 600px;

        height: 230px;

        background-color: #ccc;

        justify-content: center;

    }

    .flex-container3 {

        display: flex;

        width: 600px;

        height: 230px;

        background-color: #ccc;

        justify-content: space-around;

    }

    .flex-item {

        background-color: red;

        width: 100px;

        margin: 5px;

        color: #fff;

    }

</style>

<body>

    <p>space-between模式（space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配）</p>

    <p> 两端的模块靠边，然后将剩余空间平分 </p>

    <div class="flex-container1">

        <div class="flex-item ">学编程</div>

        <div class="flex-item ">上w3cschool</div>

        <div class="flex-item ">学编程</div>

        <div class="flex-item ">上w3cschool</div>

    </div>

    <p>center模式(全部居中显示，但是元素之间不重叠)</p>

    <div class="flex-container2">

        <div class="flex-item ">学编程</div>

        <div class="flex-item ">上w3cschool</div>

        <div class="flex-item ">学编程</div>

        <div class="flex-item ">上w3cschool</div>

    </div>

    <p>space-around模式（space-around表示居中对齐然后在主轴方向上将剩余空间平均分配）</p>

    <p> 每个模块均分剩余空间 </p>

    <div class="flex-container3">

        <div class="flex-item ">学编程</div>

        <div class="flex-item ">上w3cschool</div>

        <div class="flex-item ">学编程</div>

        <div class="flex-item ">上w3cschool</div>

    </div>

</body>

</html>

关于justify-content属性的再学习（区分三个属性）的更多相关文章

  1. Quartz定时任务学习（二)web应用/Quartz定时任务学习（三）属性文件和jar

    web中使用Quartz 1.首先在web.xml文件中加入 如下内容(根据自己情况设定) 在web.xml中添加QuartzInitializerServlet,Quartz为能够在web应用中使用 ...

  2. Spark学习笔记-三种属性配置详细说明【转】

    相关资料:Spark属性配置  http://www.cnblogs.com/chengxin1982/p/4023111.html 本文出处:转载自过往记忆(http://www.iteblog.c ...

  3. Quartz定时任务学习（三）属性文件和jar

    以下是我在应用的的一个基本配置: #---------调度器属性----------------org.quartz.scheduler.instanceName = TestSchedulerorg ...

  4. spring学习（三）属性注入

    用的是IDEA的maven工程,pom.xml文件导包依赖省略 本文主要写set方式注入 (一).一般类型注入 一.写两个实体类Car.User public class Car { private ...

  5. vue再学习

    day01 Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 使用Vu ...

  6. MongoDB的学习--索引类型和属性（转）

    原文链接:MongoDB的学习--索引类型和属性 索引类型 MongDB的索引分为以下几种类型:单键索引.复合索引.多键索引.地理空间索引.全文本索引和哈希索引 单键索引(Single Field I ...

  7. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  8. Android再学习-20141023-Intent-Thread

    20141023-Android再学习 Intent对象的基本概念 Intent是Android应用程序组件之一 Intent对象在Android系统中表示一种意图 Intent当中最重要的内容是ac ...

  9. 《JS权威指南学习总结--6.8对象的三个属性》

    内容要点: 每一个对象都有与之相关的原型(prototype).类(class)和可扩展性 一.原型属性 1.对象的原型属性是用来继承属性的,这个属性是如此重要,以至于我们经常把 "0的原型 ...

随机推荐

  1. Cross-channel Communication Networks

    Cross-channel Communication Networks 2019-12-13 14:17:18 Paper: https://papers.nips.cc/paper/8411-cr ...

  2. 一条SQL语句执行得很慢的原因有哪些？| MySQL高性能优化规范建议

    一条SQL语句执行得很慢的原因有哪些 https://mp.weixin.qq.com/s?__biz=Mzg2OTA0Njk0OA==&mid=2247485185&idx=1&am ...

  3. DVT JetBrains License Server（JetBrains授权服务器）2018 v1.1 最新版 含32位/64位

    DVT JetBrains License Server是JetBrains系列软件授权服务器,支持2017版本得jetbrains pycharm,JetBrainswebstorm,JetBrai ...

  4. Mac下iTerm2使用

    之前一直使用 Mac OS 自带的终端,用起来虽然有些不太方便,但总体来说还是可以接受的,是有想换个终端的想法,然后今天偶然看到一个终端利器 iTerm2,发现真的很强大,也非常的好用,按照网上配置了 ...

  5. PHPUnit 单元测试教程

    一.官网下载对应 PHP 版本的代码库 https://phpunit.de/getting-started-with-phpunit.html 二.安装 PHPUnit 官网提供了两种方法安装 1. ...

  6. FFmpeg在VS2017下的编译

    今天无意中在gayhub发现个牛逼工程,全VS工程编译FFMPEG库,包括依赖库全是VS生成的,无需Mingw等Linux环境. 简单记录下过程,以防将来重装系统等情况,备忘. https://git ...

  7. siglongjmp和sigsetjmp 用法

    1. 引入原因 由于在信号处理期间自动屏蔽了正在被处理的信号,而使用setjmp/longjmp跳出信号处理程序时又不会自动将 信号屏蔽码修改会原来的屏蔽码,从而引起该信号被永久屏蔽. 可以使用sig ...

  8. Spring Boot JDBC：加载DataSource过程的源码分析及yml中DataSource的配置

    装载至:https://www.cnblogs.com/storml/p/8611388.html Spring Boot实现了自动加载DataSource及相关配置.当然,使用时加上@EnableA ...

  9. ubuntu修改apache端口号

    第一步 sudo vi /etc/apache2/ports.conf 修改监听端口以及主机端口为8080 NameVirtualHost *:8080 Listen 8080 第二步 sudo vi ...

  10. Javascript / Nodejs call 和 apply

    call: 改变了函数运行的作用域,即改变函数里面this的指向apply:同call,apply第二个参数是数组结构 例如: this.name = 'Ab'var obj = {name: 'BB ...