关于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 ...
随机推荐
- cctype头文件中的一些内容
1. string 标准库 1.1初始化 string s1; 默认构造函数s1为空 string s2(s1); 将s2初始化为s1的一个副本 string s3(“value”); 将s3初始化为 ...
- linux shell 常用表达式汇总
1. linux shell 逻辑运算符.逻辑表达式详解: http://www.cnblogs.com/chengmo/archive/2010/10/01/1839942.html
- 移动web开发实践-css3(1)盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
- android开发--数据库(更新或者降低版本)
Andoird的SQLiteOpenHelper类中有一个onUpgrade方法. 1. 帮助文档里说的"数据库升级"是指什么? 你开发了一个应用,当前是1.0版本.该程序用到了数 ...
- ARCGIS多种影像裁剪
在互联网上下载的遥感影像都进行过分幅处理,下载下来的影像多是规则的四方形,而在进行遥感影像研究时,多是针对特定区域来进行,比如研究北京市的遥感影像,不在北京市范围内的影像对于研究者就没有利用意义,如果 ...
- ppt 数组课后作业
任务要求:随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路:建一个数组,在for语句中将随机数存入数组中,然后每生成一个数就进行相加, ...
- Ubuntu 12.04搭建l2tp服务器记录。
1. 安装openswan apt-get install openswan 2.打开 /etc/ipsec.conf 文件,做如下配置: 其中,virtual_privat这里包含的网络地址允许配置 ...
- mybatis执行批量更新update
Mybatis的批量插入这里有http://ljhzzyx.blog.163.com/blog/static/38380312201353536375/.目前想批量更新,如果update的值是相同的话 ...
- scrum.4
1.准备看板. 形式参考图4. 2.任务认领,并把认领人标注在看板上的任务标签上. 先由个人主动领任务,PM根据具体情况进行任务的平衡. 然后每个人都着手实现自己的任务. 3.为了团队合作愉快进展顺利 ...
- 服务器控件中使用<%#...>, JS和html控件中使用<%=...>
//在服务器控件的属性中,需要用<%#...>来绑定其他控件的ID, 并且要在页面初始方法中,执行Page.DataBind(); <asp:ImageButton ID=" ...