关于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的原型 ...
随机推荐
- intellij idea远程调试
有时候发布后的包不得不进行debug,但是又不方便本地开发环境直接debug模拟,所以不得不需要远程debug. 启动参数 首先在服务端使用JVM的-Xdebug参数启动Jar包. java -Xde ...
- 《Go语言实战》读书笔记
<Go语言实战>中文版pdf 百度网盘: https://pan.baidu.com/s/1kr-gMzaPAn8BFZG0P24Oiw 提取码: r6rt 书籍源码:https://gi ...
- linux centos编译安装php7.3
php7.2的编译安装参考:https://www.cnblogs.com/rxbook/p/9106513.html 已有的之前编译的旧版本php: mv /usr/local/php /usr/l ...
- git push ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'https://github.com/Operater9/guest' hint: Updates were rejected because the tip of your current bra
推送本地代码到github报错 git push报错 ! [rejected] master -> master (non-fast-forward) error: failed to push ...
- scrapy中的Pipeline
当Item在Spider中被收集之后,它将会被传递到Item Pipeline,这些Item Pipeline组件按定义的顺序处理Item. 每个Item Pipeline都是实现了简单方法的Pyth ...
- Spark SQL里concat_ws和collect_set的作用
concat_ws: 用指定的字符连接字符串 例如: 连接字符串: concat_ws("_", field1, field2),输出结果将会是:“field1_field2”. ...
- WPF,回车即是tab
正在做的WPF项目,客户需要在文本框里输入后按回车即跳到下一个框框,和tab一样的 上网搜索了下解决方案:如下: 在文本框外围 的grid加上KeyDown事件,代码里写上: /// <summ ...
- 自动以读写方式挂载ntfs(新)-苹果之路
之前的mac下挂载ntfs磁盘的方法在新版本的macos下失效了:<自动以读写方式挂载ntfs-黑苹果之路>,现提供一个有效的方法,系统版本:白苹果10.14.6,参见<Mac OS ...
- 【SQL骚操作】SqlServer数据库表生成C# Model实体类SQL语句
已知现有表T1 想快速获取cs类结构 /// <summary> /// T1 /// </summary> public class T1 { /// <summary ...
- 【Docker学习之七】Docker图形化管理和监控
环境 docker-ce-19.03.1-3.el7.x86_64 centos 7 一.Docker管理工具 (官方三剑客)1.Docker Machine(学习的Openstack Heat)Cr ...