相关疑难解决方法(0)

flex-basis和width之间有什么区别？

有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是

flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.

...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.

我想知道flex-basis与实际宽度的不同之处:

如果我用flex-basis替换宽度(反之亦然),那么会在视觉上改变什么？
如果我将两者设置为不同的值会发生什么？如果它们具有相同的值会发生什么？
是否存在一些特殊情况,使用宽度或柔性基础与使用另一个有明显区别？
如何宽度和柔性基础上与其他Flexbox的风格,如配合使用时,不同的柔性包装,柔性成长和弹性收缩？
还有其他重大差异吗？

编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.

css css3 flexbox

jpe*_*emi

2017 05-23

196
推荐指数

5
解决办法

6万
查看次数

嵌套的 flex 元素不会使父元素增长

我正在尝试用月份名称和该月份名称正下方的所有日子撰写标题。

天项目有固定的宽度，所以我想：为什么不使用 flexbox？

由于某些原因，.day元素正在从其父级下降而父级不会增长。

您能否给我一个提示，为什么flex-basis: auto在几天的插槽溢出后不使月份插槽增长？

至于实现，我已经找到了使用float: left而不是使用 flexbox 的解决方法。但我不明白为什么它会这样工作。

.main {
  display: flex;
}

.month {
  flex: 0 0 auto;
}

.days {
  display: flex;
}

.day {
  flex: 0 0 2em;
}

Run Code Online (Sandbox Code Playgroud)

<div class='main'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div> …

Run Code Online (Sandbox Code Playgroud)

html css flexbox

sky*_*yer

2016 05-01

5
推荐指数

1
解决办法

2421
查看次数