考虑 flex-direction
阅读问题时首先想到的是，
flex-basis这并不总是适用于
width。
当
flex-direction是
row，
flex-basis控制宽度。
但是，当
flex-direction是
column，
flex-basis控制高度。
关键差异
以下是
flex-basis和
width/ 之间的一些重要区别
height：
flex-basis
仅适用于弹性商品。Flex容器（也不是flex项目）将忽略，flex-basis
但可以使用width
和height
。flex-basis
仅在主轴上起作用。例如，如果您在中flex-direction: column
，则width
需要该属性以水平调整弹性项目的大小。flex-basis
对绝对放置的弹性项目没有影响。width
和height
属性将是必要的。绝对定位的弹性项目不参与弹性布局。通过使用
flex
属性，三种属性-flex-grow
，flex-shrink
和flex-basis
-可整齐地组合成一个声明。使用width
，相同的规则将需要多行代码。
浏览器行为
就它们的呈现方式而言，和之间应该 没有区别 ，除非是或。
flex-basis``width``flex-basis``auto``content
从规格：
7.2.3。 该
flex-basis物业对于
auto和以外的所有值content，flex-basis其解析方式与width水平写入模式相同。
但是，影响
auto或
content可能根本很少或没有。规格中的更多内容：
auto
在弹性商品上指定时，
auto关键字将检索main size属性的值作为used
flex- basis。如果该值本身是
auto，则使用的值为
content。
content
表示根据弹性项目的内容自动调整大小。
_注意：此值在“ Flexible Box Layout”的初始发行版中不存在，因此某些较早的实现不支持该值。
可以通过将
auto主尺寸（width或height）与一起使用来达到同等效果auto。_
因此，根据规范，
flex-basis并进行
width相同的解析，除非
flex-basis是
auto或
content。在这种情况下，
flex-basis可以使用内容宽度（大概也可以使用该
width属性的宽度）。
该flex-shrink
因素
记住Flex容器的初始设置很重要。其中一些设置包括：
flex-direction: row
-伸缩项目将水平对齐justify-content: flex-start
-flex项目将堆叠在主轴线的开始处align-items: stretch
-伸缩物品将扩展以覆盖容器的横向尺寸flex-wrap: nowrap
-弹性项目被迫停留在一行flex-shrink: 1
-允许伸缩项目收缩
注意最后的设置。
因为默认情况下允许弹性项目收缩（这可以防止它们溢出容器），所以指定的
flex-basis/
width/
height可能会被覆盖。
例如，
flex-basis: 100px或
width: 100px与结合使用
flex-shrink: 1，不一定是100px。
要呈现指定的宽度（ 并保持固定） ，您将需要禁用缩小：
div { width: 100px; flex-shrink: 0;}要么
div { flex-basis: 100px; flex-shrink: 0;}或者，按照规范的建议：
flex: 0 0 100px;
7.2。 灵活性的组成部分
鼓励作者使用
flex速记而不是直接使用其速记属性来控制灵活性，因为速记会正确地重置任何未指定的组件以适应常见用途。
浏览器错误
某些浏览器无法在嵌套的flex容器中调整flex项的大小。
flex-basis
在嵌套的flex容器中被忽略。width
作品。
使用时
flex-basis，容器将忽略其子容器的大小，并且子容器会溢出容器。但是在拥有该
width属性的情况下，该容器尊重其子级的大小并相应地扩展。
