弹性布局的justify-content属性
现在我来谈谈我对弹性布局中的justify-content的了解，justify-content是弹性布局的属性，写它之前一定要写上display:flex，这是弹性布局的写法而且要写在同一个类中，下面是我自己写的一个很简单的布局，现在让我们来看看它的HTML的代码：
图中是我用三个同级的div来写的大的div里面包裹这几个小的div，当然小的div也不一定是要div用标签来代替也可以，这是个人喜欢那么接下来让我们来看看css部分的代码：
上面的那些就是css部分的代码用他们来布局页面比浮动好用很多，justify-content有5个元素他们分别是：center、flex-start、flex-end、space-around、space-between它们的作用都不一样列如：justify-content：space-between是他们的元素之间有间隔而且他们的间隔距离都是一样的就如下图：
而justify-content：space-around就是所有元素都被空格包裹起来与justify-content：space-between不同的是justify-content：space-between第一个元素与第二个元素是紧贴着边框的而justify-content：space-around的第一个元素和最后一个元素相当于给它们加上了边距而且所有的距离都一样；justify-content：center就是元素居中就如图下注意：第一行是justify-content：space-around第二行才是justify-content：center的。
最后就然我们看看用justify-content里面的space-between、space-around和center属性组合的模型：
当然这是我为了好了解才用一些简单的元素打出来的里面的元素你可以换成图片、文字或者标签等等，打出来的效果都是一样的。而且弹性布局justify-content属性可以根据你屏幕的大小来自动分配间隔距离。
弹性布局的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 ...
最新文章
- react antd Table 选中某一行，其它行也被选中了
- 未能创建Microsoft Visual C# 2008 编译器 解决方案【轉】
- react native 组件之switch组件的用法
- linux 删除20日前数据,Linux 维护常用命令
- 最简单人工智能python_Python人工智能之路 - 第四篇 : jieba gensim 最好别分家之最简单的相似度实现...
- HDU 2089 不要62 数位DP
- LeetCode-18-4Sum
- JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）
- log4j.properties配置与将异常输出到Log日志文件实例
- linux上安装openssl的步骤
- Linux入门相关基础知识
- python xml.etree.ElementTree
- 字节实习生开发的 AI 竟然被网友用在了王冰冰身上！
- 计算机中毒后开机变慢,电脑中毒后运行慢的解决方法
- Python数据分析理论与实战完整版本
- 关联规则挖掘（Apriori算法）
- 在vs2017上如何创建一个静态库
- 【毕业设计】基于stm32的便携用电功率统计系统 -物联网 嵌入式 单片机
- Android 来电监听
- ISME：表层蓝藻下沉至1000米深海固氮