关于display:flex
遇到了一个bug 就是display:flex 遇到的bug原型就是,项目容器的diaplay:flex ,一行项目五个,到最后一行只剩两个的时候 是两端对齐的,如果再添加的话 也就是两端各一个子元素 加中间一个,占满对齐,解决方案还未知,这是display:flex的缺点?看网评。前几年的回复浏览器兼容性问题较严重,也没提到这个呀?有点不明所以,继续查阅中吧。。。。
上点资料:
display:flex 全称:弹性布局 属性:
flex-direction 决定主轴的方向(即项目的排列方向)默认值:row主轴为水平方向,起点在左端 row-reverse:主轴为水平方向,起点在右端 column 主轴为垂直防线,起点在上沿 column-reverse:主轴为垂直方向,起点在下沿
flex-wrap 项目都排在一条线上(又称 轴线) 默认值:nowrap:不换行 wrap:换行,第一行在上方 wrap-reverse:黄航,第一行在下方
flex-flow 是flex-direction和flex-wrap简写 默认值为row nowrap
justify-content 定义了项目在主轴上的对齐方式 默认值:flex-start 左对齐 flex-end:右对齐 center:居中 space-between:两端对齐 space-around 每个项目两侧的间隔相等,所以,项目之间的间隔比项目边框的间隔大一倍
align-items 是项目在交叉轴上如何对齐 默认值:stretch 如果项目未设置搞多或者设为auto 将占满整个容器的高度 flex-start 交叉轴的起点对齐 flex-end 交叉轴的终点对齐 center 交叉轴的中点对齐 baseline 项目的第一行文字的基线对齐
slign-content 电柜了多根轴线的对齐方式 如果项目只有一个轴线,该属性不起作用 默认值: stretch 轴线占满整个交叉轴 flex-start 与交叉轴的起点对齐 flex-end 与交叉轴线的终点对齐 center 与交叉轴的中点对齐 space-between 与交叉轴两端对齐,轴线之间的间隔平均分布 space-around:每根轴线连个测的间隔都相等,所以,轴线之间的间隔比轴线的间距大一倍
项目属性
order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0
flex-grow 定义项目的放大比例,默认为0 如果存在默认空间,也不放大
flex-shrink 定义了项目的缩小比例,默认为1,如果空间不足,该项目缩小
flex-basis 定义了在分配多余空间之前,项目占据的主轴矿建,浏览器根据这个属性计算主轴是否有多余空间,他的默认值为auto,即项目的本来大小
flex flex-grow flex-shrink flex-basis简写 默认值器0 1 auto 后两个属性可选
algin-self 允许单个项目和其他项目不一样的对齐方式,科覆盖align-items属性,默认值 为auto 表示继承父元素的align-items属性,如果没有父元素,则等同于stretch align-self: auto | flex-start | flex-end | center | baseline | stretch;
关于display:flex的更多相关文章
- 浅谈display:flex
display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 ...
- 多栏多列布局(display:flex)
display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...
- (有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug
项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧widt ...
- display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
- CSS3 display:flex和display:box有什么区别?
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
- display flex 和a标签不行
父元素display: flex; display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; 配合子元素 fl ...
- 弹性盒布局display:flex详解
一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...
- 微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...
- display:flex css
本文介绍下flex的用法和属性 这个一个自适应的3列盒子 <div class="flex"> <div style="background-color ...
- display:box和display:flex填坑之路
背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...
随机推荐
- sencha touch百度地图扩展
扩展代码如下: Ext.define('ux.BMap', { alternateClassName: 'bMap', extend: 'Ext.Container', xtype: 'bMap', ...
- git 使用入门
参考教程: 廖雪峰的官方网站 MY UBUNTU 安装: sudo apt-get install git GIT 理解: 选定的目录为git的工作区.该目录下的任何改动,git都会记录为工作区的修改 ...
- Windows Azure初体验
目前在IT界,云这个概念的第一意思不再是词典里的解释了.不过它们还是有相同点的——也许确实会酝酿出一块大蛋糕,可也是飘在天上,众神分食之,与我等P民无关.所谓云,不过是网络时代发展到一定阶段的必然产物 ...
- flag--命令行参数定义多标签示例
// TestFlag2 project main.go package main import ( "flag" "fmt" ) func main() { ...
- Struts2框架之-Struts2的标签
Struts2包含哪些标签? 解答: A: <s:a href=”"></s:a>—–超链接,类似于html里的<a></a> <s:a ...
- excel解析二维数组结构的excel
public void fileImport(Ufile ufile) throws Exception { String filePath = ufile.getFilePath(); List&l ...
- 如何优化cocos2d程序的内存使用和程序大小
在我完成第一个游戏项目的时候,我深切地意识到"使用cocos2d来制作游戏的开发者们,他们大多会被cocos2d的内存问题所困扰".而我刚开始接触cocos2d的时候,社区里面的人 ...
- JS function
JS函数的定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JS函数的声明 function functionname(){语句} 注意:function必须是小写,否则会报错. J ...
- C# 自定义特性
http://www.cnblogs.com/tekkaman/p/3983360.html#undefined https://msdn.microsoft.com/zh-cn/library/sw ...
- kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸