相关疑难解决方法(0)

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

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

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

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

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

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

我正在研究嵌套的flexbox布局,它应该如下工作:

最外层(ul#main)是一个水平列表,当添加更多项时,它必须向右扩展.如果它变得太大,应该有一个水平滚动条.

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

此list(ul#main > li)的每个项目都有一个header(ul#main > li > h2)和一个内部列表(ul#main > li > ul.tasks).此内部列表是垂直的,应在需要时包装到列中.当包装到更多列时,其宽度应该增加,以便为更多项目腾出空间.此宽度增加也应适用于外部列表的包含项.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

我的问题是当窗口的高度太小时内部列表不会换行.我已经尝试了很多篡改所有的flex属性,试图仔细遵循CSS-Tricks的指导,但没有运气.

这个JSFiddle显示了我到目前为止所拥有的内容.

预期结果 (我想要的):

实际结果 (我得到的):

较旧的结果 (我在2015年得到的):

UPDATE

经过一番调查,这开始看起来像一个更大的问题.所有主流浏览器的行为方式都相同,而且与我的嵌套Flexbox设计无关.更简单的flexbox列布局拒绝在项目换行时增加列表的宽度.

这其他的jsfiddle清楚地表明了问题.在当前版本的Chrome,Firefox和IE11中,所有项目都正确包装; 列表的高度在row模式中增加,但其宽度在column模式下不会增加.此外,在更改column模式的高度时,根本没有立即回流元素,但存在row模式.

然而,官方规范 …

我有一个容器<div>用display: flex.它有一个孩子<a>.

如何让孩子显得"内联"？

具体来说,如何让孩子的宽度由其内容决定,而不是扩展到父母的宽度？

我尝试了什么:

我把孩子设置为display: inline-flex,但它仍占用了整个宽度.我也尝试了所有其他显示属性,但没有任何效果.

例:

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

http://codepen.io/donpinkus/pen/YGRxRY

如果您使用Flexbox布局来连续布局某些项目,则Flexbox容器会占用其所在容器的整个宽度.如何将Flexbox容器设置为仅占用其子元素的宽度？

看一下下面的例子:

https://jsfiddle.net/5fr2ay9q/

在此示例中,flexbox容器的大小超出子元素的宽度.解决这类问题的典型方法display: inline显然是不起作用,因为它不再是一个flexbox容器.

是否有可能做到这一点？

.container {
  display: flex;
  flex-direction: row;
  outline: 1px solid red;
}

p {
  outline: 1px solid blue;
}

Can you make the flex container not 100% width but rather the width of the content itself?

<div class='container'>
  <img src='https://placehold.it/300x300'/>
  <p>
    This is some content hello world testing 123.
  </p>
</div>