遇到了一个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. 关于oracle中创建新表时将我们要用的表的结构和数据都复制过去

    今天在oracle中遇到了一个问题,就是给我查询出来了一张表的数据,只有部分的字段,让我将这张表的结构和数据放到新的临时表中,并进行数据的查询. 我是这样做的: 如:create table tabl ...

  2. <iframe>标签自适应高度和宽度

    <iframe src="index.html" id="iframepage" frameborder="0" scrolling= ...

  3. 网页手机wap2.0网页的head里加入下面这条元标签......

    网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...

  4. Yaf框架下类的自动加载

    前面两篇博客分别讲述了PHP自带的类加载和composer中类的自动加载,其实Yaf框架也实现了基于PSR0和PSR4的类的自动加载.根据我对Yaf下类的自动加载方式的理解写下这篇博客.由于接触Yaf ...

  5. 自动检测浏览器是手机还是pc

    function CheckBrower() { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad| ...

  6. 为 Linux 应用程序编写 DLL[转]

    自:http://www.ibm.com/developerworks/cn/linux/sdk/dll/index.html 在仅仅只会编写插件的时候为什么要编写整个应用程序? 插件和 DLL 通常 ...

  7. 数据库FMDB-sql

    1.首先要先导入第三方类库FMdatabase. 2.获得存放数据库文件的沙盒地址. #pragma mark - 创建数据库 - (void)createAndInitDatabase { NSSt ...

  8. 《SSM框架搭建》一.构建maven web项目

    一.创建maven工程File-New-other-Maven Project 二.设置项目工作空间,取消默认勾选,手动设置 三.选择internal,输入web,选择maven.archetypes ...

  9. AIX 环境下遇到Device Busy问题

    IBM AIX v5.3操作系统环境下在对网络或网卡进行操作过程中经常遇到"Device Busy"而终止操作例如:#rmdev -l ent1遇到如下返回信息Method err ...

  10. linux 学习 软件工具

    _____secureCRT 远程通信工具 第二行第二个快速连接,输入主机名,即ip地址,和用户名,root .其它默认:端口22,协议ssh2,防火墙 none. 保存会话,连接.需要输入用户密码. ...