flex-item的flex-basis与width属性有什么关系？

lewinlee 发布于2019-08-30 13:01 / 1203人阅读

摘要：在这里，如果你设置的值非，而是其它一个符合或者属性规则的值，那么对于计算这个值的规则和中块级元素的计算规则是一样样的。同时放在了在上的，这里会长期写一些关于的文章

我们知道，给一个元素A设置display: flex; ，那么A就是flex container，此时如果A元素有三个子元素A-1,A-2,A-3，那么这三个子元素便是A的flex item，我们可以给flex item设置flex-basis。这个flex-basis是干嘛的呢？先贴一段官方的巴拉巴拉：

This component sets the flex-basis longhand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors. It accepts the same values as the width and height properties (except that auto is treated differently) plus the content keyword

大体意思就是，flex-basis指定了flex-item在主轴方向上的的初始大小，这个属性接受同widh或者height一样的值，顺便w3c还给新增了一个值content。

flex-basis的值auto的计算规则是，它会先检索一下你是否设置了width（或者height值，取决于flex-direction），如果设置了明确的非auto的width值（或者height值），那么它就会用这个值，否则的话最后使用的值是content。在这里，如果你设置flex-basis的值非auto、content，而是其它一个符合width（或者height）属性规则的值，那么对于计算这个值的规则和css2中块级元素的计算规则是一样样的。

那么，flex-basis和width（或者height）的关系，目前（说不定啥时候就又变了呢，呵呵呵）只是当flex-basis设置为auto且width（或者height）不为auto时，计算flex-basis的used size时会用到width（或者height）的值。

那么，来验证一下：

下图，中间“电影”元素，flex:1;（对应flex-basis的值为0） width在一直变化，但是并没有影响“电影”的大小

/分割线/

下图，中间“电影”元素，flex-basis:auto; width在一直变化，“电影”的大小也一直在变化

呵呵呵，看美队3去。

同时放在了在github上的something of css，这里会长期写一些关于css的文章

云服务器 GPU云服务器 width属性 js原型属性有什么用北京腾讯云计算与腾讯是什么关系 linux和unix有什么关系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115240.html

新手flex布局入门篇，看这篇文章就够了

摘要：提纲介绍盒子模型什么是基础项目实战视频源码链接介绍参考文档什么是层叠样式表是层叠样式表的缩写。布局简称，布局是中一种新的布局模式，用于改进传统模式中标签对齐方向以及排序等等缺陷。主要用设置在容器里面严着主轴的排列方式。提纲 CSS介绍盒子模型什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...

Lionad-Morotar 2019-08-29 12:51 评论0 收藏0
flex-item属性之flex-grow、flex-shrink了解下

摘要：容器仍然是，灰灰，小橘，需要一起减掉才可以。但是灰灰和小橘的瘦身能力明显不一样，他们设置了不同的，分别为和。瘦掉的这需要平分到灰灰加上小橘身上的每一个上。前言 flex布局，想必css江湖上的各位侠士都用得很多了，那我们今天就来说说flex-item下的几个不太常用的属性吧（其实是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。从容貌上来看，grow，shrink，grow，shri...

Simon_Zhou 2019-08-30 15:47 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

felix0913 2019-08-23 15:29 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

huangjinnan 2019-08-23 15:28 评论0 收藏0