flexbox父盒子justify-content属性
<!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属性的更多相关文章
- flexbox父盒子align-content属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子align-items属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子flex-wrap属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox父盒子flex-direction属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox子盒子align-self属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flexbox弹性盒子模型
这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...
- css FlexBox 弹性盒子常用方法总结
总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- 行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释
最近在看张鑫旭大佬的<css世界>,读到5.2.4 内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...
随机推荐
- linux源配置
阿里云源配置官网:http://mirrors.aliyun.com 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS ...
- 12 extremely useful hacks for JavaScript
In this post I will share 12 extremely useful hacks for JavaScript. These hacks reduce the code and ...
- nodemon是个好东西
不说话,直接上图: 安装 使用
- Mac 创建证书（以 创建gdb证书 为例 ）
open /Applications/Utilities/Keychain\ Access.app/ 打开 钥匙串访问 继续继续 创建完毕. Now that we have a certificat ...
- Mybatis系列(二)：优化MyBatis配置文件中的配置和解决字段名与实体类属性名不相同的冲突
原文链接:http://www.cnblogs.com/xdp-gacl/p/4264301.html http://www.cnblogs.com/xdp-gacl/p/4264425.ht ...
- mysql函数find_in_set()
SELECT FIND_IN_SET('b','a,b,c,d'); 结果:2 SELECT * from video where find_in_set(id,'1,2,3,4'); 查找id在‘1 ...
- Git -- 工作区 和 暂存区
Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工 ...
- Lemon OA第2篇：功能解析方法
Lemon OA,整个系统功能也算是比较丰富,OA的很多功能都能看见影子,虽然做得不是很强大 接触Lemon OA,起源于Activiti的学习热情,既然这样,研究Lemon OA的目标有3: 1.L ...
- mothur 计算稀释性曲线
在微生物分析中,经常使用稀释性曲线来评估测序量是否足够:可以使用mothur 这个软件来完成 rarefaction.single 命令用来做稀释性曲线,既可以对单个样本单独分析,也可以一次对多个样本 ...
- MyBatis批量增删改的另外一种思路（推荐）
零.传统拼接SQL语句的弊端 传统上利用Mybatis进行批量操作的方式本质来说是拼接SQL语句,然后交给底层执行,如之前博文而言. 其实这种方式是存在弊端的: 1. SQL语句可能会过长,DB的引擎 ...