相关疑难解决方法(0)

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

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

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

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

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

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

我有一个webapp,我使用flexbox进行布局.

我试图填充屏幕(它是一个应用程序,而不是文档),并尽可能不指定任何固定的宽度或高度,因为内容可能是各种各样的事情(完全流畅的布局!梦想!)

所以我需要流体高度,全宽页眉和页脚,然后在中间的主面板填充剩余的垂直空间,分成列,每个列在太高时滚动,并且每个非主列的宽度应缩小适合其内容,以及占用剩余空间的主要列.

我是如此接近,但不得不求助于显式调整非主要列 - 我相信flex-basis: content;应该这样做但是浏览器还不支持.

这是一个显示固定大小列的最小演示:

var list = document.querySelector('ul')

for (var i = 0; i < 100; i++) {
  var li = document.createElement('li')
  li.textContent = i
  list.appendChild(li)
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
main > section {
  overflow-y: auto;
  flex-basis: 10em;
  /* Would be better if it were fluid width/shrink to fit, …

我注意到在flexbox规范中flex-basis可以设置为content.

我正在尝试在HTML中使用它.但它不适用于chrome.

有人能告诉我一个例子flex-basis: content吗？

谢谢.

鉴于:

.layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.layout aside,
.layout main {
  min-width: 100px;
}

.layout aside {
  flex: 0 0 content;
  background-color: red;
}

.layout main {
  flex: 1 1 content;
  background-color: green;
}

<div class="layout">
  <aside>
    <p>Line 1</p>
  </aside>
  <main>
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </main>
</div>

Live example

我的意图是:

• 旁边应该与它包含的内容一样大,永远不要改变它的宽度
• 主要应该采取其余的水平空间
• 一边和另一边应该有相同的高度(两者中的最大值)

但如果我运行该代码并使用Chrome检查它,我会在两个flex:语句中收到以下错误:

无效的属性值

此外,绿色框不会像它应该的那样在右侧扩展.我的Chrome版本在Mac OS X 10.11.5上为56.0.2924.87(64位).

我究竟做错了什么？