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宽度总结的更多相关文章

  1. 对Flex布局的总结与思考

    阅读本文之前最好对flex布局有基本了解,可以通过"参考资料"中列举的资源来学习. flex布局规范的设计目标 一维布局模型(one-dimensional layout mode ...

  2. 移动web开发------公用css----自己总结

    @charset "utf-8"; html, body { background: #fff; color: #505050; font-size: 10px; -moz-use ...

  3. CSS 手札记

    Display:Block/Flex 宽度如果不定义会尽可能的扩充外层宽度 在内容区域使用高度百分比和固定像素高度的时候外层设overflow:auto;可以把内层的高度撑开,否则外层会比内层短一截 ...

  4. Flex中宽度计算

    flex 有三个属性值,分别是 flex-grow, flex-shrink, flex-basis,默认值是 0 1 auto. 发现网上详细介绍他们的文章比较少, 今天就详细说说他们,先一个一个看 ...

  5. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  6. flex布局居中无效果注意是否设置了宽度

    <View style={{display:),backgroundColor:),alignItems:'center'}}> <JDTouchable style={styles ...

  7. flex自适应宽度显示省略号

    text-overflow:ellipsis文本溢出显示省略号,一般的搭配用法如下: div{ text-overflow:ellipsis; overflow:hidden; white-space ...

  8. Flex 布局里 input 宽度最小 150px 的问题, 浏览器 BUG?

    今天在使用 flex 布局时, 发现当 flex 布局容器比小(小于 150px )时,里面的 input[text] 的宽度会比容器宽: <style> #main { width:12 ...

  9. 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug

    bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...

随机推荐

  1. [R] 简单笔记(一)

    library(lattice) xyplot(Petal.Length~Petal.Width,data=iris,goups = Species)//画分类图 plot(model,subdata ...

  2. Python 进程 线程总结

    操作系统的底层是 进程 线程 实现的 进程 操作系统完成系统进程的切换,中间有状态的保存.进程有自己独立的空间,进程多,资源消耗大 进程是最小的资源管理单位 可以理解为盛放线程的容器 线程 线程是最小 ...

  3. Python 模块(二)

    1 logging 模块 logging有两种的配置的方式,configure.logger 1.1 config方式 import logging ''' 日志的配置:config模式 只能选择在屏 ...

  4. Dojo的dojoConfig函数

    在我们引入 Dojo 的时候都会先做一些全局的配置,所使用的就是 Dojo 的 Config 接口. dojoConfig为以前的dgConfig函数. <script type="t ...

  5. HTML DOM Frame 的 src

    定义和用法 src 属性可设置或返回应当被载入框架中的文档的 URL. 该属性只是 HTML 的 <frame> 标记的一个对应,并不是 Window.location 这样的 Locat ...

  6. Js笔记-第17课

    课 // 作业 //深度拷贝 var obj = { name:'rong', age:'25', card:['visa','alipay'], nam :['1','2','3','4','4'] ...

  7. Clang提供的办法

    1.方法弃用警告 #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated-declarati ...

  8. DD命令做备份和恢复

    正确的备份方法是先挂载移动硬盘分区:mount /dev/sdb5 /mnt 然后再备份:dd if=/dev/sda of=/mnt/backup_sda.img 恢复时同样要先挂载,再恢复:mou ...

  9. 拓扑排序 topsort

    拓扑排序 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边(u,v)∈E(G),则u在线性序 ...

  10. (68)zabbix windows性能计数器使用详解

    概述 windows下的性能计数器让zabbix监控更加轻松,直接获取性能计数器的数值即可完成windows监控.性能计数器如下:   1 perf_counter["\Processor( ...