flex布局 - justify-content: space-evenly

justify-content: space-evenly可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置），space-evenly将剩余空间平均分割，例如有5个元素，这样就有6个相同宽度的间隔空间，间隔空间的数量等于元素的数量加一。

有5个元素，justify-content: space-between最左边和和最右边的元素分别占据最左边和最右边的空间，然后剩余空间平均分割，这样就有4个相同宽度的间隔空间，间隔空间的数量等于元素数量减一。

justify-content: space-between可以利用伪元素方式，在第一个元素的前边和最后一个元素的后边分别加上一个不占空间的元素，这样就是7个元素，相同宽度的间隔空间数量为6，因为左右两边元素不占空间，所以实现了space-evenly的效果。

container{display: flex;flex-flow: row nowrap;align-items: center;justify-content: space-between;//justify-content: space-evenly;&:before,&:after {content: '';display: block;}
}

原文：https://www.jianshu.com/p/bbd114834c59

转载于:https://www.cnblogs.com/xjy20170907/p/11230710.html

flex布局 - justify-content: space-evenly相关推荐

网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习线上练习flex布局 html css .shaizi { width: ...
flex布局 flex_时髦的Flickr Flex小部件
flex布局 flex A web widget, or badge, is a small, embeddable element that you can add to your site tha ...
flex 布局
Flex Layout 的目的是为了提供一种高效的方式去为一个容器里面元素布局,对齐,分配空间,即使他们的大小尺寸是未知的,或者是动态变化的父容器有能力修改里面子元素的宽度和高度从而更好的分配空间. ...
flex布局，弹性盒子，css使用及理解
flex布局以下内容主要分为四个部分: 常见概念 flex容器相关属性 flex元素相关属性 flex布局的应用 flex布局的兼容性处理 flex布局的相关概念弹性盒模型弹性盒模型(Flexi ...
Flex布局学习完成PC端
目标样式,请使用目录查阅,代码较长当下代码完成的效果图,学习熟练flex 一.总体代码 0.html代码 <!DOCTYPE html> <html lang="en&q ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
Flex布局新写法兼容写法详解
很久之前用过flex,但是没有考虑过兼容性问题,为了兼容ios一定要加上-webkit前缀: ul{display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ * ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...

flex布局 - justify-content: space-evenly

flex布局 - justify-content: space-evenly相关推荐

最新文章

热门文章