(弹性布局)justify-content的属性案例
justify-content一共有五个属性，如下
justify-content:flex-startjustify-content:flex-endjustify-content:centerjustify-content:space-centerjustify-content;space-around
justify-content: flex-start;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>justify-content(主轴方向的排列方式)</title><!-- 一定要用控制变量的方式进行分析 --><style>.cont{width: 600px;height: 600px;border: 1px solid red;margin: 20px auto;/* 弹性布局 */display: flex;/* 弹性方向的变化 */justify-content: flex-start;}.cont div{width: 30px;height: 100px; font-size: 30px;/* 小盒子内部的文字居中 */line-height: 100px;text-align: center;background-color: pink;margin-left: 5px;}/* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 */.cont div:nth-child(1){height: 200px;}.cont div:nth-child(3){height: 250px;}.cont div:nth-child(6){height: 200px;}</style>
</head>
<body><div class="cont"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body></html>运行结果
2. justify-content: flex-end;
代码
运行结果
justify-content:center
代码
运行结果
justofy-content:space-around
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>justify-content(主轴方向的排列方式)</title><!-- 一定要用控制变量的方式进行分析 --><style>.cont{width: 600px;height: 600px;border: 1px solid red;margin: 20px auto;/* 弹性布局 */display: flex;/* 弹性方向的变化 *//* 相同的下面的会覆盖上面的 */justify-content: flex-start;justify-content: flex-end;justify-content: center;justify-content: space-around; }.cont div{width: 30px;height: 100px; font-size: 30px;/* 小盒子内部的文字居中 */line-height: 100px;text-align: center;background-color: pink;}/* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 */.cont div:nth-child(1){height: 200px;}.cont div:nth-child(3){height: 250px;}.cont div:nth-child(6){height: 200px;}</style>
</head>
<body><div class="cont"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body></html>
justify-content:space-between
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>justify-content(主轴方向的排列方式)</title><!-- 一定要用控制变量的方式进行分析 --><style>.cont{width: 600px;height: 600px;border: 1px solid red;margin: 20px auto;/* 弹性布局 */display: flex;/* 弹性方向的变化 *//* 相同的下面的会覆盖上面的 */justify-content: flex-start;justify-content: flex-end;justify-content: center;justify-content: space-around; justify-content: space-between; }.cont div{width: 30px;height: 100px; font-size: 30px;/* 小盒子内部的文字居中 */line-height: 100px;text-align: center;background-color: pink;}/* 子盒子的高度则设置成不一样，便于观察现象，更加的具有参考价值 */.cont div:nth-child(1){height: 200px;}.cont div:nth-child(3){height: 250px;}.cont div:nth-child(6){height: 200px;}</style>
</head>
<body><div class="cont"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body></html>运行结果
(弹性布局)justify-content的属性案例相关推荐
- flex弹性布局教程-09-容器属性flex-flow
本节目标 掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要 本篇介绍了容器属性 flex-flow,是 ...
- flex弹性布局教程-04项目属性flex-grow
本节目标 掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要 本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
- flex弹性布局教程-03-项目属性flex-basis
本节目标 掌握 flex-basis 的用法. 了解 flex-basis 和 width 的不同. 阅读时间大约5分钟. 内容摘要 本篇介绍了 flex 项目属性的第一个 flex-basis ,用 ...
- flex弹性布局教程-10容器属性justify-content
本节目标 掌握justify-content的基础使用. 掌握项目多列排列使用justify-content对齐的技巧. 内容摘要 本篇介绍了容器属性justify-content,用来设置项目在主轴 ...
- 03flex弹性布局父项常见属性总结
技术交流QQ群:1027579432,欢迎你的加入! 1.常见父项属性 以下有6个属性是对父元素设置的: flex-direction: 设置主轴的方向 justify-content: 设置主轴上的 ...
- flex弹性布局教程-07容器属性flex-direction
本节目标 掌握flex-direction的使用. 了解主轴变化的概念. 内容摘要 本篇讲解了容器属性 flex-direction,用来设置主轴的方向. 阅读时间大约10~15分钟. flex容器属 ...
- flex弹性布局教程-12容器属性align-content
本节目标 掌握align-content的基础使用. 掌握align-content和justify-content的区别. 掌握align-content和align-items的区别. 内容摘要 ...
- CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局 最外层是是一个div,div里面是 ...
- 彻底搞懂弹性布局flex
说明:大家在看弹性布局这一块,最好按照从上到下一点一点看,因为上下联系比较紧密. 点击这里,看原文带目录的. 弹性布局基本概念 任何一个容器都可以设置弹性布局,一旦容器设置了 弹性布局以后,子元素的f ...
- css布局之弹性布局flex
1. 弹性布局作用 作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局. 2.弹性布局的定义和属性 弹性布局是定义在一个父容器中,加上disp ...
最新文章
- 2018-1-8 Linux学习笔记
- 全局变量求平均分最高分最低分_想去江苏读大学，2021届山东考生需要多少分？...
- Linq to SQL之使用事务
- mysql删除密码代码_mysql 用户新建、受权、删除、密码修改
- 两个子集pom互相调用_ConcurrentHashMap 使用：每个 Key 只调用 1 个方法
- python sqlite cursor
- redis服务端的maxclient和最大连接空闲时间设置
- 洛谷3672：小清新签到题——题解
- 状态空间搜索好题UVA10603
- adblock插件_为WordPress创建一个反AdBlock插件
- mac tree命令
- 分布式服务架构读书笔记-第六章 Java服务的线上应急和技术攻关
- 使用spark计算IRR(内部收益率)
- oracle cube 交叉分组,oracle的ROLLUP跟CUBE语句分组（转）
- Wuli智能无限的机器人已经上场了，人类律师快靠边站
- ElementUI Button按钮样式
- oracle查询本周本月本季本年时间
- Java中类的修饰符有哪些？
- CANopen协议及应用
- excel流程图分叉 合并_快速制作组织架构图，层次结构图，流程图等，只需学会这个功能...