css flex 布局 space-around 和 space-evenly 之间的区别css flex布局)
space-around 和 space-evenly 都是 justify-content属性
.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
flex-start
(默认):项目被打包朝向 flex-direction 的开始。flex-end
: 项目被打包到 flex-direction 的末尾。start
: 物品被包装在方向的开始处writing-mode
。end
: 物品被包装到方向的尽头writing-mode
。left
: 物品被包装在容器的左边缘,除非这对 . 没有意义,否则flex-direction
它的行为就像start
.right
: 物品被包装在容器的右边缘,除非这对 . 没有意义,否则flex-direction
它的行为就像start
.center
:项目沿线居中space-between
:物品均匀分布在行中;第一项在起始行,最后一项在结束行space-around
:项目均匀分布在行中,周围空间相等。请注意,视觉上的空间是不相等的,因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位,但下一个项目之间有两个空间单位,因为下一个项目有自己的适用间距。space-evenly
:项目分布使得任何两个项目之间的间距(以及边缘的空间)相等。
看代码:
space-evenly
<!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>Document</title><style>*{margin: 0;padding: 0;}.parent{width: 600px;display: flex;flex-direction:row;flex-wrap:wrap;justify-content: space-evenly;border: 1px solid royalblue;}.child{width: 100px;height: 100px;background: red;}</style>
</head>
<body><div class="parent"><div class="child"></div><div class="child"></div><div class="child"></div></div>
</body>
</html>
很明显 space-evenly 任何两个项目之间的间距(以及边缘的空间)相等
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>Document</title><style>*{margin: 0;padding: 0;}.parent{width: 600px;display: flex;flex-direction:row;flex-wrap:wrap;justify-content: space-around;border: 1px solid royalblue;}.child{width: 100px;height: 100px;background: red;}</style>
</head>
<body><div class="parent"><div class="child"></div><div class="child"></div><div class="child"></div></div>
</body>
</html>
很明显 space-around 只有内部项目彼此之间的间距相等。第一项和最后一项将仅分配一半的间距 。
从这定义就可以看出 区别了:
space-evenly
在空间均匀中,弹性项目之间的空白空间总是相等的。但是,在 space-around 中,只有内部项目彼此之间的间距相等。第一项和最后一项将仅分配一半的间距 。
flex布局 教程可以看看 阮老师的博客,我都是看他写的简单 易懂:
Flex 布局教程:语法篇 - 阮一峰的网络日志
Flex 布局教程:实例篇 - 阮一峰的网络日志
flex 布局(可以用 谷歌自带的翻译)
css flex 布局 space-around 和 space-evenly 之间的区别css flex布局)相关推荐
- css的排版连起来跟全部竖着的区别,CSS实现文字竖排排版
使用bat/vbs/ahk对Windows下进行自动化操作 回想90年代,我们在DOS下使用各种命令链对操作进行简化和自动化,如DOS 5.0添加的DosKey,利用管道和重定向对多组命令进行链式操作 ...
- 在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...
- CSS3 - 使用弹性盒子(Flex Box)实现完美居中、栅格系统及响应式布局
CSS3弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的 ...
- JVM内存区域详解(Eden Space、Survivor Space、Old Gen、Code Cache和Perm Gen)
参考文章: https://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html https://www.cnblogs.com/duanx ...
- [bootstrap]栅格布局与flex的区别以及栅格布局的响应式应用
栅格布局的特点以及与flex的区别 HTML <body><!-- 一行4个 --><div class="container"><div ...
- DIV布局 旅游官网-滚动模板(6页) HTML+CSS+JavaScript HTML5期末考核大作业,网站——旅游网站
HTML5期末大作业:旅游网站设计--旅游官网-滚动模板(6页) HTML+CSS+JavaScript 文章目录 HTML5期末大作业:旅游网站设计--旅游官网-滚动模板(6页) HTML+CSS+ ...
- flex布局:子子元素过大撑开了设定flex:1的子元素的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 让p3脱离文旦流,不影响外层flex布局: p2设置相对定位,p3设置绝对定位 设置p2的overflow不为visible, ...
- optee:kernel space调用user space进程时候的硬件行为
文章目录 1.先看kernel调用userspace所需的的参数 2.先看kernel mode切换user mode的寄存器行为 ★★★ 链接 : 个人博客导读首页-点击此处 ★★★ 我们以opte ...
- ie兼容响应式布局的实现总结 和 针对ie浏览器的CSS
参考链接:http://zhidao.baidu.com/link?url=bQioDKMnG_eQoE6dCxzd2hPtMyiB7phu6hBdOupn1Pjk1hV-ItXFZS5GDUBoH5 ...
- css高度已知,左右定宽,中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head><meta ...
最新文章
- idea 快速导入实现父类方法_教你快速吸引精准粉丝实现流量变现的方法
- 资源 | 机器学习必知的15大框架,欢迎补充!
- leetcode算法题--反转链表★
- 用云存储30分钟快速搭建APP
- acwing----春季每日一题2022篇(一)
- python 代码格式规范脚本_Python编码规范
- path弧形参数 svg_如何计算圆弧(圆弧)的SVG路径
- linphone相关(转)
- 学生选课系统,第二版
- timthumb+php,timthumb.php生成缩略图参数详解
- 【Node.js】Node.js安装及环境配置
- 大一学科不挂科 速冲方法推荐(高数上+高数下+线代+大物)
- 今日头条技术架构分析
- vscode 离线安装.vsix(window 全教程)
- php study pro,phpStudy Pro官方下载|
- 慢就是快的人生哲理_感悟人生:慢是一种心态
- Hanoi Tower Troubles Again!
- SpringBoot 集成 ES 7.6.2 并对字段进行中文和拼音分词处理
- Django入门 | 官方文档带你快速入门
- 【学习】CEO绿色经历能否促进企业绿色创新