Flex Basis与Width的区别

【Flex Basis与Width的区别】

Flex Items的应用准则

content –> width –> flex-basis (limted by max|min-width)
也就是说，

  • 如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
  • 如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小

当容器没有足够大的空间来存放所有的items的时候，flex items会按照压缩率(shrink rate)被压缩(shrink)其大小来填充容器,这个压缩率就是flex-shrink来设置的，默认情况下每个item的压缩率都是一样的。

我们可以控制flex items的增长来填充可用的空间，这也就是flex-grow属性的作用。默认值为0，意味着item不会增长。如果将每个item设置flex-grow： 1，那么所有 的item都会等比例的增长来填充剩余的空间。

参考：http://www.jianshu.com/p/17b1b445ecd4

时间： 2024-10-27 17:59:15

Flex Basis与Width的区别的相关文章

jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidth() = a+padding; outerWidth() = a+padding+border; outerWidth(true) = a+padding+border+margin; 在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(paddi

CSS的width:100%和width:auto区别

CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和名称换行显示了,但是在IE8和IE9下则显示正常.定位到问题后,最终发现是下面的属性导致的,如下图红色所致,把width的值设置为auto后即可解决问题: .TreeView,.TreeView ul{ padding:0px 0px 0px  19px; list-style:none; marg

canvas.width和canvas.style.width的区别

先让我们来看下代码: <!DOCTYPE HTML><html><body> <canvas id="myCanvas" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas> <script type="text/javascript"> var

max(min)-device-width和max(min)-width的区别

max-device-width和max-width的区别 max-device-width和max-width是有区别的,表现在如下几个方面: 1.max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度. 2.max-width是目标显示区域的宽度,例如,浏览器宽度. 3.如果使用max-device-width,那么在PC浏览器上浏览网页时,缩小或放大浏览器时是不执行CSS的,因为“PC设备”没有变化.但如果使用max-width,缩小或放大浏览器时是执行CSS的

css width=&quot;100&quot; style =&quot;width:100px&quot; 区别

1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. style ="width:100px"优先级较高 3. 只有有限的元素支持width="100"属性,例如table, td等 4. JQuery中获取width如下 <div style="width:200px;height:200px;"

jQuery .css(&quot;width&quot;)和.width()的区别

首先先解释下 普通元素 和 非普通元素,非普通元素是指  window,document 这些元素对象,普通元素是指  除window,document 这些非普通元素外 的元素,如:div 对于普通的元素 ,他们的作用相同.比如网页上有一个 div 元素: <div style="width:200px;height:200px;"></div> 我们可以使用:  $(function(){     var width1 = $("div"

min-width和width的区别

1.正常情况下: width :给块级元素/行内块 元素设置固定的宽度,或者固定百分比的宽度. min-width:  当盒子内部元素宽度小于 min-width的值时,盒子宽度为 min-width的值,当盒子内容宽度大于 min-width的值时,盒子随着内容的增加而被撑大,没有上上限,但是 盒子宽度的最小值是 设置的 min-width 的值参考:https://blog.csdn.net/ITzhongzi/article/details/80434508 2.底部阴影 0px 不能简写

Java基础(basis)-----==和equals()的区别

1. equals方法 只能处理引用类型变量,比较两个对象是否相等.会比较两个引用变量的地址值是否相等,如果属于String类,还会比较值是否相同 package com.practice; public class Practice { public static void main(String[] args) { String s1 = new String("AA"); String s2 = new String("AA"); String s3 = &q

css属性应用bug大杂烩(后续继续更新)

一.Flex布局使用时的坑: 1.常见的左右分布的flex布局中,左侧给定宽度,右侧占满剩余空间,但当右侧中文字内容很多时,会挤占左侧空间,时左侧不能按照定宽显示. <style> .father{ display: flex; width: 500px; height: 200px; } .left{ width: 200px; background-color: green; } .right{ flex-grow: 1; background-color: red; } </sty