flex弹性布局教程-10容器属性justify-content
本节目标
- 掌握justify-content的基础使用。
- 掌握项目多列排列使用justify-content对齐的技巧。
内容摘要
本篇介绍了容器属性justify-content,用来设置项目在主轴方向上的对齐方式,对每个属性值都进行了演示。
阅读时间大约5~10分钟。
justify-content基础
justify-content 属性用来设置项目在主轴方向上的对齐方式。语法格式如下:
.container {justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}
其中:
1. flex-start 沿着主轴方向 起点 对齐(默认值)。
2. flex-end 沿着主轴方向 结尾 对齐。
3. center 沿着主轴方向 居中 对齐。
4. space-between 沿着主轴方向 间隔 对齐,头尾没有间距。
5. space-around 沿着主轴方向 间隔 对齐,头尾有间距。
下面我们通过例子来说明一下,有图看下就不难理解了。
示例1,有一个div(容器,450px),容器内包含3个div(项目,flex-basis 为50px),设置 justify-content 为 flex-start:
.container {/* 设置子元素的布局为flex布局 */display: flex;/* 设置项目主轴方向上的对齐方式 */justify-content: flex-start;
}.item {/* 设置项目占用空间为50px */flex-basis: 50px;
}
运行效果:
好像不设置 justify-content 这个也一样,因为 justify-content 默认就是 flex-start。
示例2,接上例,设置 justify-content 为 flex-end:
.container {/* 设置项目主轴方向上的对齐方式 */justify-content: flex-end;
}
运行效果:
项目这边是排到右边去了,不过项目的排序还是按照:项目1、项目2、项目3这样。
示例3,接上例,设置 justify-content 为 center:
.container {/* 设置项目主轴方向上的对齐方式 */justify-content: center;
}
运行效果:
左右的间距是一样的,这个就是居中了。
示例4,接上例,设置 justify-content 为 space-between:
.container {/* 设置项目主轴方向上的对齐方式 */justify-content: space-between;
}
运行效果:
项目之间的间距是一样的,就是这个含义。
示例5,接上例,设置 justify-content 为 space-around:
.container {/* 设置项目主轴方向上的对齐方式 */justify-content: space-around;
}
运行效果:
就是每个项目加上前后空间的范围是一致的,这个就是 space-around 的含义了。
思考:
假如上面的例子,我们都设置项目的 flex-basis 为50%,那么能看得出区别吗?
解答:
因为 flex-basis 设置为 50%,那么3个项目就是150%,超过容器宽度了。
这样就没有剩余空间了,所以理论上来讲 justity-content 设置成什么值都是一样的。
实际运行效果如下:
justify-content应用
实例1,我们在网站上常常会看到这样的布局方式:
以前用 float 来做,难点在于右边的项目要最靠右,这样需要计算两个项目之间的间距,通过 margin 进行设置。
如果碰到外围容器大小不固定,就很难计算,通过 flex布局就很方便了。
这边模拟实现一下项目的布局,中间的图片、文字等内容就不具体编写了。
1)有一个div(容器,宽度98%,左右居中对齐),容器内包含6个div(项目,各自有背景色),代码如下:
<style>* {margin: 0;padding: 0;}.container {width: 98%;margin: 0 auto;}.item1 {background-color: skyblue;}.item2 {background-color: aliceblue;}.item3 {background-color: lightblue;}.item4 {background-color: cadetblue;}.item5 {background-color: powderblue;}.item6 {background-color: skyblue}
</style>
<div class="container"><div class="item item1">item1</div><div class="item item2">item2</div><div class="item item3">item3</div><div class="item item4">item4</div><div class="item item5">item5</div><div class="item item6">item6</div>
</div>
运行效果:
div是块元素,所以会占满一行。然后使用 flex弹性布局 来处理。
2)设置容器为 flex 布局,项目自动换行,项目的宽度为 49%:
.container {/* 设置子元素的布局为flex布局 */display: flex;/* 设置项目自动换行 */flex-wrap: wrap;
}.item {/* 设置项目占用主轴空间 */flex-basis: 49%;
}
这边代码不难理解,因为每行是两个,每个宽最多为50%,考虑到还有间距,所以设置项目宽为 49%。
运行效果如下:
做到这边,有的童靴就想到了,可以设置 justify-content 为 space-between 来处了。
3)设置 justify-content 为 space-between:
.container {/* 设置项目 间隔 对齐 */justify-content: space-between;
}
运行效果:
这样在布局上就很完美了,不同手机尺寸看起来效果都差不多:
本节总结
- justify-content 属性用来设置项目在主轴方向上的对齐方式。
- 通过 justify-content 属性可以很好的实现项目多列排列对齐的问题。
flex弹性布局教程-10容器属性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的区别. 内容摘要 ...
- flex弹性布局教程-04项目属性flex-grow
本节目标 掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要 本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
- flex弹性布局教程-03-项目属性flex-basis
本节目标 掌握 flex-basis 的用法. 了解 flex-basis 和 width 的不同. 阅读时间大约5分钟. 内容摘要 本篇介绍了 flex 项目属性的第一个 flex-basis ,用 ...
- flex弹性布局教程-09-容器属性flex-flow
本节目标 掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要 本篇介绍了容器属性 flex-flow,是 ...
- Flex 弹性布局教程以及对主轴 交叉轴的理解 :语法篇
弹性布局的主轴交叉轴的理解 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main ...
- CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局 最外层是是一个div,div里面是 ...
- 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
- 移动端基础(2)—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
最新文章
- android切图尺寸_安卓设计尺寸规范
- android 设颜色透明值
- html代码在线运行环境,ES5/可执行代码与执行环境
- bfs理解——hdu6386好题
- Android权限【大全】 .
- 小样本点云深度学习库_合成鲁棒的对抗样本来欺骗深度学习分类器
- 互联网晚报 | 4月13日 星期三 | 阿里云人事大变动;老坛酸菜方便面重返超市货架;工信部:加快5G全连接工厂建设...
- oracle查询报错clb,Oracle RAC 负载均衡与故障转移(三)
- OGG迁移大库注意要点之impdp导入产生大量归档
- springmvc网页找不到404_eclipse新建WebProject访问主页404错误的解决
- 问号匹配,带元组规则的位置匹配不到
- 微信小程序图片上传并展示
- 中源幼儿园收费管理系统 pdf软件
- visio mysql使用教程_Visio技巧篇之一些常用小技巧
- visio 连接线样式设置 如箭头线
- DTL语言学习(一)模板变量和{% if %}标签的使用
- DELL R630 如何利用IDRAC升级BIOS固件和IDARC
- 【一文讲通】样本不均衡问题解决--上
- led灯珠型号及使用参数
- 2022年同济大学计算机考研复试分数线
热门文章
- CTF--信息技术对抗赛ISCC之安卓逆向分析
- 关于python中Y组合子的问题讨论
- LitJson 将json 解析为C#类
- php是什么电荷,分子中电荷变化种种 - 量子化学 - 小木虫 - 学术 科研 互动社区...
- Microsoft office professional plus2010
- SparkCore入门编程
- Andriod 真正意义上的唤醒第三方应用(只需要知道包名即可)
- 2020-2021中科院陈玉福算法设计与分析期末考试
- js插件动态加载js、css解决方案
- 「技术人生」第10篇:如何做研发效能提升(即指标体系建设过程回顾)