遇到了一个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. iOS--KVO的实现原理与具体应用

    本文分为2个部分:概念与应用. 概念部分旨在剖析KVO这一设计模式的实现原理,应用部分通过创建的项目,以说明KVO技术在iOS开发中所带来的作用: 如果是作为是刚接触KVO的初学者,可以在了解基本原理 ...

  2. python脚本基础总结

    1. 注释 ①单行注释:#单行注释 ②多行注释: ''' 三个单引号,多行注释符 ''' ③中文注释:#coding=utf-8 或者 #coding=gbk 2.输入输出 ① 输入:  3.0后的p ...

  3. PSP个人(观众界面)

    需求:作为一个观众,我希望了解某一场比赛的比分,以便了解赛况.(满意条件:精确到每一局的结果比分) 需求分析:实现查询数据库中每一局的分数并用界面显示. 生成设计文档: 运用三层架构,实现软件的基本功 ...

  4. Excel 取得一定范围内最大的有值的行号

    dim iRow iRow = Range("A1000").End(xlUp).Row

  5. 阅读{django-restframework}源码[generics.py]学习笔记

    首先django-restframework是基于django的一个框架.   mixins.py中开头是这样写的: Basic building blocks for generic class b ...

  6. 使用Fluent配置表关系

    转载MS官方文档:https://msdn.microsoft.com/zh-cn/data/jj591620 Configuring Relationships with the Fluent AP ...

  7. 超牛的VS菜单

    所有菜单都重复了,Google到了解决办法:devenv /resetuserdata 但好不容易装好额ReSharper又不见了

  8. SQL数据库与excel表格之间的数据 导入 导出

  9. NIO 连接

    http://www.iteye.com/magazines/132-Java-NIO

  10. CountDownLatch如何使用

    正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...