了解无单元弹性基础 [英] Understanding unit-less flex-basis

问题描述

有 Internet Explorer 11和flexbox的长期存在的问题，必须使用flex声明单元 ，例如

There is a longstanding issue with Internet Explorer 11 and flexbox that a unit must be declared with flex, e.g.

/* Works */
flex: 1 0 0%;
/* Does not work */
flex: 1 0 0;

解决方法是为结尾的零指定一个单位-最好是%，因为缩小符通常不会删除该单位.

The workaround would be to specify a unit for the ending zero - preferably % because minifiers don't usually remove that unit.

不幸的是，我正在使用Prepros(SCSS编译器)，并且我使用内置的CSS缩小器来决定仍然删除该百分比.我曾以为这只会给我IE 11中的问题，但现在我注意到该问题也出现在所有其他主要浏览器中(在Edge，FF，Chrome上测试).

Unfortunately, I am working with Prepros (SCSS compiler) and I use the built-in CSS minifier that decides to remove the percentage anyway. I had thought this would only give me issues in IE 11, but now I have noticed that the issue is also seen in all other major browsers (tested on Edge, FF, Chrome).

采用以下代码.我希望主要元素(绿色)会增长以适应其内容，但事实并非如此.至少在使用无单位值时不行.如果将main的flex更改为1 0 0%，则一切正常.为什么会这样?

Take the code below. I expect the main element (green) to grow to accommodate for its contents, but it does not. At least not when using a unitless value. If you change flex to 1 0 0% for main, everything works as expected. Why is that?

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: red;
  height: 120px;
  padding: 12px;
}

main {
  background: green;
  display: flex;
  overflow: scroll;
  align-items: center;
  flex: 1 0 0;
}

footer {
  background: blue;
  height: 80px;
}

<div class="page-wrapper">
  <!-- more HTML elements -->
  <div class="container">
    <header></header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>

      <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac
        turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Nam nec ante. </p>

    </main>
    <footer></footer>
  </div>
</div>

推荐答案

修订后的答案

当使用无单位0作为flex-basis属性的初始值时，高度将基于flex-grow/flex-shrink值.

When using a unitless 0 as initial value for the flex-basis property, the height will be based on the flex-grow/flex-shrink value.

在这种情况下，flex-grow值1将告诉该项目增长并填充其父级container的剩余空间.

The in this case flex-grow value 1 will tell the item to grow and fill the remaining space of its parent, the container.

container的高度设置为100％，这将基于其父级高度page-wrapper.

The container's height is set to 100%, which will be based on its parents height, the page-wrapper.

但是，由于page-wrapper的高度不应该从中计算出container的高度，因此page-wrapper将为0，因此main也会如此.

But since the page-wrapper doesn't have a height from where the container is suppose to calculate its 100% from, it will be 0, hence the main will too.

现在，如果将flex-basis更改为百分比0%，它将在 content 上增加其高度，然后再添加flex-grow/flex-shrink值，因此main内容将可见.

Now, if one change the flex-basis to a percentage, 0%, it will base its height on the content, before the flex-grow/flex-shrink value will be added, hence the main content will be visible.

要在所有浏览器上获得一致的输出，所有父母都需要height，而flex-basis需要一个单位(或者简单地说，IE11需要一个单位，其余的则不需要)

To get a consistent output on all browsers, all parents need a height, and flex-basis need a unit (or simply put, IE11 need a unit, the rest doesn't)

html, body {
  width: 100%;
  height: 100%;
}

.page-wrapper {
  height: 100%;                     /*  added  */
}

.container {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: red;
  height: 120px;
  padding: 12px;
}

main {
  background: green;
  display: flex;
  overflow: scroll;
  align-items: center;
  flex: 1 0 0%;                     /*  IE11 need a unit  */
}

footer {
  background: blue;
  height: 80px;
}

<div class="page-wrapper">
  <!-- more HTML elements -->
  <div class="container">
    <header></header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>

      <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac
        turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Nam nec ante. </p>

    </main>
    <footer></footer>
  </div>
</div>

关于您的Prepros(SCSS编译器)，我想它可以实现预期的效果，因为除flex-basis之外，或多或少的所有其他属性值中，如果值是0%，它可以安全地删除百分号. .尝试将百分比设置为除此以外的任何值，即0.001%

Regarding your Prepros (SCSS compiler), I guess it does what it is suppose to, as in more or less all other property values other than flex-basis, it can safely remove the percentage sign if the value is 0%. Try setting the percent to anything but that, i.e. 0.001%

这篇关于了解无单元弹性基础的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！