flexbox的子元素flex item的宽度，按照以下规则计算：
content>width>flex-basis(limited by max/min-width)
  1. flex-basis的缺省值为auto；
  2. 如果flex-basis的值为auto，那么flex item的宽度由width属性决定；如果没有设置width，flex item的宽度由它的内容决定；
  3. 如果flex-basis值在max-width和min-width之间，flex-basis决定宽度；
  4. 如果flex-basis大于max-width，则宽度为max-width；
  5. 如果flex-basis小于min-width，则宽度为min-width；
  6. 这里会出现过大内容的问题，如果flex item的内容宽度很宽，会使flex item的宽度也变大；（很多布局中都会出现超长字符或者超大内容撑大布局的问题）；
 
 
 

flex item的width VS flex-basis的更多相关文章

  1. flex item default All In One

    flex item default All In One flex item default 初始值 === flex: 0 1 auto; https://drafts.csswg.org/css- ...

  2. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  3. flex布局设置width无效

    子元素设置 : flex: 0 0 85px; 参数: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有 ...

  4. flex与j2ee的结合(flex+Spring)

    分类: flex spring2012-04-25 02:11 1262人阅读 评论(1) 收藏 举报 flexspringactionscriptjavapropertiesservlet   目录 ...

  5. css flex布局，小程序flex布局，垂直居中完美解决

    flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...

  6. flex 的 三个参数 flex:1 0 auto

    flex :flex-group  flex-shirk  flex-basis ①.flex-group 剩余空间索取 默认值为0,不索取 eg:父元素400,子元素A为100px,B为200px. ...

  7. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  8. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  9. flex 布局 计算器

    flex布局计算器 <!doctype html> <html> <head> <style> .box{ display: flex; flex-di ...

随机推荐

  1. 类型：。net；问题：HQL；结果：HQL: Hibernate查询语言

    HQL: Hibernate查询语言 Hibernate配备了一种非常强大的查询语言,这种语言看上去很像SQL.但是不要被语法结构 上的相似所迷惑,HQL是非常有意识的被设计为完全面向对象的查询,它可 ...

  2. 微信开发准备(一)--Maven仓库管理新建WEB项目

    转自:http://www.cuiyongzhi.com/post/13.html 在我们的项目开发中经常会遇到项目周期很长,项目依赖jar包特别多的情况,所以我们经常会在项目中引入Maven插件,建 ...

  3. DAY9-python并发之多线程理论

    一 什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...

  4. 数据库监听。数据库一次notify，Activity多次接收

    今天项目中发现一个bug: (1)当uri数据库中有更新,会从数据库层DataService中通知应用层,调用notifyChange: mContext.getContentResolver().n ...

  5. 【转】Xcode 清理存储空间

    移除 Xcode 运行安装 APP 产生的缓存文件(DerivedData) 只要重新运行Xcode就一定会重新生成,而且会随着运行程序的增多,占用空间会越来越大.删除后在重新运行程序可能会稍微慢一点 ...

  6. Ajax笔记（一）

    Ajax三步骤: Asynchronous Javascript And XML 1.运用HTML和CSS实现页面,表达信息: 2.运用XMLHttpRequest和web服务器进行数据的异步交换: ...

  7. springJDBC01 利用springJDBC操作数据库

    1 什么是springJDBC spring通过抽象JDBC访问并一致的API来简化JDBC编程的工作量.我们只需要声明SQL.调用合适的SpringJDBC框架API.处理结果集即可.事务由Spri ...

  8. iOS 列表三级展开

    效果图如下:        #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDe ...

  9. 7-n!末尾有几个0

    如何确定一个N!末尾有多少个零 转载 2015年08月30日 15:02:49 622 题目:1*2*3*……*100 求结果末尾有多少个零 分析:一般类似的题目都会蕴含某种规律或简便方法的,阶乘末尾 ...

  10. ROS Learning-020 learning_tf-04（编程）让turtle2 海龟跟随turtle1海龟，并绕着 turtle1海龟转圈 (Python版)

    ROS Indigo learning_tf-04 (编程)让 turtle2 海龟跟随 turtle1 海龟,并绕着 turtle1 海龟转圈 (Python版) 我使用的虚拟机软件:VMware ...