关于justify-content属性的再学习（区分三个属性）
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属性的再学习（区分三个属性）的更多相关文章
- Quartz定时任务学习（二)web应用/Quartz定时任务学习（三）属性文件和jar
web中使用Quartz 1.首先在web.xml文件中加入 如下内容(根据自己情况设定) 在web.xml中添加QuartzInitializerServlet,Quartz为能够在web应用中使用 ...
- Spark学习笔记-三种属性配置详细说明【转】
相关资料:Spark属性配置 http://www.cnblogs.com/chengxin1982/p/4023111.html 本文出处:转载自过往记忆(http://www.iteblog.c ...
- Quartz定时任务学习（三）属性文件和jar
以下是我在应用的的一个基本配置: #---------调度器属性----------------org.quartz.scheduler.instanceName = TestSchedulerorg ...
- spring学习（三）属性注入
用的是IDEA的maven工程,pom.xml文件导包依赖省略 本文主要写set方式注入 (一).一般类型注入 一.写两个实体类Car.User public class Car { private ...
- vue再学习
day01 Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 使用Vu ...
- MongoDB的学习--索引类型和属性（转）
原文链接:MongoDB的学习--索引类型和属性 索引类型 MongDB的索引分为以下几种类型:单键索引.复合索引.多键索引.地理空间索引.全文本索引和哈希索引 单键索引(Single Field I ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- Android再学习-20141023-Intent-Thread
20141023-Android再学习 Intent对象的基本概念 Intent是Android应用程序组件之一 Intent对象在Android系统中表示一种意图 Intent当中最重要的内容是ac ...
- 《JS权威指南学习总结--6.8对象的三个属性》
内容要点: 每一个对象都有与之相关的原型(prototype).类(class)和可扩展性 一.原型属性 1.对象的原型属性是用来继承属性的,这个属性是如此重要,以至于我们经常把 "0的原型 ...
随机推荐
- uniapp - 更改项目生成模板、页面
每次生成项目目录都需要删除一些再添加太麻烦了,就想着能不能修改一下模板 - 当然自定义模板也能实现 好了,被我找到了. 修改以后源文件名称和格式覆盖回去即可,重新启动hbuilderx 这里可以修改e ...
- Cesium中的几种坐标和相互转换【转】
几个重要的坐标对象:1.世界坐标 Cartesian3:笛卡尔空间直角坐标系 new Cesium.Cartesian3(x, y, z) 可以看作,以椭球中心为原点的空间直角坐标系中的一个点的坐标. ...
- [转]详解vue父组件传递props异步数据到子组件的问题
原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...
- [转]iview的render函数用法
原文地址:https://www.jianshu.com/p/f593cbc56e1d 一.使用html的标签(例如div.p) 原生标签用法 二.使用iview的标签(例如Button) iview ...
- Java 待学习知识
Java 工厂模式和策略模式 Java 面向对象与面向接口的设计模式 Java 六大设计原则 - 单一职责原则 设计模式之禅 大话设计模式
- Linux下安装.NET Core
环境 { "操作系统":"CentOS 7.5 64位", "CPU":"1核", "内存":&qu ...
- JAVAFX 项目 SpringBoot 最简单的集成
1,JAVA 版本 JDK 1.8 2,首先我们创建一个 springboot 的空项目,只添加以下的依赖 <dependency> <groupId>org.springfr ...
- java 堆调优
一.查看kafka集群的broker的堆内存使用情况 1>.使用jstat查看gc的信息([root@kafka116 ~]# jstat -gc 12698 1s 30) 参数说明:S0C:第 ...
- centos7如何将docker容器配置成开机自启动
docker 服务器开机自启动: 1.systemctl is-enabled docker.service 检查服务是否开机启动 2.systemctl enable docker.service ...
- hbase 安装（集群模式）
环境:jdk 1.8 + hadoop2.7.6+zookeeper3.4.9+centos7 一.安装zookeeper(集群模式) 0.安装机器 ip ...