遇到了一个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的更多相关文章

  1. 浅谈display:flex

    display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 ...

  2. 多栏多列布局(display:flex)

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  3. (有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug

    项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧widt ...

  4. display:flex 多栏多列布局

    转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...

  5. CSS3 display:flex和display:box有什么区别?

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  6. display flex 和a标签不行

    父元素display: flex;  display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; 配合子元素 fl ...

  7. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  8. 微信小程序view标签以及display:flex的测试

    一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...

  9. display:flex css

    本文介绍下flex的用法和属性 这个一个自适应的3列盒子 <div class="flex"> <div style="background-color ...

  10. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

随机推荐

  1. javascript-with()方法

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object ...

  2. 《算法导论》 调用RANDOM(0,1),实现RANDOM(a,b)的过程

    描述RANDOM(a,b)的过程的一种实现,它只调用RANDOM(0,1).作为a和b的函数,你的程序的期望运行时间是多少?(RANDOM(0,1)以等概率输出0或者1,RANDOM(a,b)以等概率 ...

  3. FreeMark学习(一)

    FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用程序 虽然FreeMark ...

  4. NHibernate系列文章二十三:NHibernate查询之Criteria查询(附程序下载)

    摘要 上一篇文章介绍了NHibernate HQL,他的缺点是不能够在编译时发现问题.如果数据库表结构有改动引起了实体关系映射的类有改动,要同时修改这些HQL字符串.这篇文章介绍NHibernate面 ...

  5. OpenLayers Map理解

    1,视口坐标的原点在左上角,水平向右为x轴正向,垂直向下为y 轴正向:2,地图坐标原点为初始图层的中心点,水平向右为x轴正向,垂直向上为y轴正向:3,视口中心点永远与地图中心点重合,不一定与瓦片中心点 ...

  6. 跨境B2B网站

    大家都在谈跨境电商,其实现在比较火的应该是跨境B2B网站,它被很多的业内人士所看好,并且也取得了很喜人的成绩,无论是经营方面还是品牌打造,都从多方向带动了行业的发展. 跨境B2B网站 一.从买方市场向 ...

  7. js数组中去除重复对象及去除空对象的方法

    (function(){//去除数组中重复对象 var unique = {}; arr.forEach(function(a){ unique[ JSON.stringify(a) ] = 1 }) ...

  8. RHEL7/CentOS7中更改网卡默认名称

    1.重命名并修改网卡配置文件,将"NAME"参数更为我们熟悉的“eth*”,这里我将其改为"eth0" [root@localhost ~]# cd /etc/ ...

  9. Linux文件查找

    Linux下查找文件的命令有两个; locate: find : locate这个命令对其生成的数据库进行遍历(生成数据库的命令:updatedb),这一特性决定了查 找文件速度很快,但是locate ...

  10. c# 的MD5加密算法

    发现用C#封装好的内部类实现MD5加密和其它语言的MD5加密结果有时会不一样,暂时发现没有特殊字符时的结果是一样的,一旦有特殊字符(09404719290010210‹»×úÛ±8*«À‡7œ–201 ...