flex宽度总结
flex宽度相关的属性有三个 flex-grow,flex-shrink,flex-basis。下面分别介绍其相关特点:
flex-grow 扩大因子,主轴有剩余空间时,元素分配到剩余空间的比率
flex-shrink 收缩因子,主轴剩余空间为负时,元素分配到剩余空间的比率
flex-basis:设置元素初始大小,若未设置,则水平排列默认为元素的宽度,垂直排列默认为元素的高度
当flex-basis为0时,例如(flex:1),此时item的宽度不受width的影响
当flex-basis为auto时,item的宽度随着width的变化增大或缩小
flex是flex-grow,flex-shrink,flex-basis的简写,简称GSB
flex的写法与三个属性的对照表
flex: none => flex: 0 0 auto;
flex: auto => flex: 1 1 auto;
flex: 0 => flex: 0 1 0%;
flex: 1 => flex: 1 1 0%;
flex: 0 auto => flex: 0 1 auto;(默认值)
flex: 0 1 => flex: 0 1 0%;
flex宽度总结的更多相关文章
- 对Flex布局的总结与思考
阅读本文之前最好对flex布局有基本了解,可以通过"参考资料"中列举的资源来学习. flex布局规范的设计目标 一维布局模型(one-dimensional layout mode ...
- 移动web开发------公用css----自己总结
@charset "utf-8"; html, body { background: #fff; color: #505050; font-size: 10px; -moz-use ...
- CSS 手札记
Display:Block/Flex 宽度如果不定义会尽可能的扩充外层宽度 在内容区域使用高度百分比和固定像素高度的时候外层设overflow:auto;可以把内层的高度撑开,否则外层会比内层短一截 ...
- Flex中宽度计算
flex 有三个属性值,分别是 flex-grow, flex-shrink, flex-basis,默认值是 0 1 auto. 发现网上详细介绍他们的文章比较少, 今天就详细说说他们,先一个一个看 ...
- flex 布局 input 宽度不自适应
flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!
- flex布局居中无效果注意是否设置了宽度
<View style={{display:),backgroundColor:),alignItems:'center'}}> <JDTouchable style={styles ...
- flex自适应宽度显示省略号
text-overflow:ellipsis文本溢出显示省略号,一般的搭配用法如下: div{ text-overflow:ellipsis; overflow:hidden; white-space ...
- Flex 布局里 input 宽度最小 150px 的问题, 浏览器 BUG?
今天在使用 flex 布局时, 发现当 flex 布局容器比小(小于 150px )时,里面的 input[text] 的宽度会比容器宽: <style> #main { width:12 ...
- 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug
bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...
随机推荐
- [R] 简单笔记(一)
library(lattice) xyplot(Petal.Length~Petal.Width,data=iris,goups = Species)//画分类图 plot(model,subdata ...
- Python 进程 线程总结
操作系统的底层是 进程 线程 实现的 进程 操作系统完成系统进程的切换,中间有状态的保存.进程有自己独立的空间,进程多,资源消耗大 进程是最小的资源管理单位 可以理解为盛放线程的容器 线程 线程是最小 ...
- Python 模块(二)
1 logging 模块 logging有两种的配置的方式,configure.logger 1.1 config方式 import logging ''' 日志的配置:config模式 只能选择在屏 ...
- Dojo的dojoConfig函数
在我们引入 Dojo 的时候都会先做一些全局的配置,所使用的就是 Dojo 的 Config 接口. dojoConfig为以前的dgConfig函数. <script type="t ...
- HTML DOM Frame 的 src
定义和用法 src 属性可设置或返回应当被载入框架中的文档的 URL. 该属性只是 HTML 的 <frame> 标记的一个对应,并不是 Window.location 这样的 Locat ...
- Js笔记-第17课
课 // 作业 //深度拷贝 var obj = { name:'rong', age:'25', card:['visa','alipay'], nam :['1','2','3','4','4'] ...
- Clang提供的办法
1.方法弃用警告 #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated-declarati ...
- DD命令做备份和恢复
正确的备份方法是先挂载移动硬盘分区:mount /dev/sdb5 /mnt 然后再备份:dd if=/dev/sda of=/mnt/backup_sda.img 恢复时同样要先挂载,再恢复:mou ...
- 拓扑排序 topsort
拓扑排序 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边(u,v)∈E(G),则u在线性序 ...
- (68)zabbix windows性能计数器使用详解
概述 windows下的性能计数器让zabbix监控更加轻松,直接获取性能计数器的数值即可完成windows监控.性能计数器如下: 1 perf_counter["\Processor( ...