如何将弹性框项目设置为没有宽度？

Question

我正在尝试创建一个悬停导航栏，内容可以在其下方滚动。但是，我想不通的一件事是在发生某些事情时如何折叠导航栏的内容（本例中，单击了其中一个导航项）。

每个导航项目都是弯曲的，所以只占用它需要的足够空间。但是，当将 flex-grow 值从 1 设置为 0.00001 时，项目的实际宽度不会改变。

在强制这个 flex box 缩小宽度以便它可以动画化方面，我有什么遗漏吗？

class App extends React.Component {
  render() {
    return <div><Header/><main>This will contain some content that is scrollable and under the nav bar.</main></div>;
  }
}

class Header extends React.Component {

	constructor(props) {
  	super(props);
    this.state = { collapse: false };
  }
  
  handleNavClick = () => {
  	this.setState({ collapse: !this.state.collapse });
  };

  render() {
    return <header>
    <nav>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>This</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>Is</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>A</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>Navigation</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>Bar</a>
    </nav>
  </header>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

header {
  font-family: sans-serif;
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  pointer-events: none;
}

header > nav {
  display: flex;
  height: auto;
  flex-flow: row wrap;
  justify-content: center;
  padding-left: 1em;
  border-radius: 0 0 3px 3px;
  padding-right: 1em;
  background-color: rgba(20, 20, 20, 0.7);
  pointer-events: auto;
}

header > nav > a {
  display: flex;
  margin-left: 0.1em;
  margin-right: 0.1em;
  color: rgba(250, 250, 250, 1.0);
  padding: 0.5em 0.85em 0.5em 0.85em;
  flex-grow: 1;
  transition: flex-grow 1s ease-in-out;
}

header > nav > a:hover {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
}

.collapsed {
  flex-grow: 0.00001;
  color: rgba(250, 125, 125, 1.0);
}

main {
  height: 120vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>

Answer 1

一些注意事项：

• “默认”不是pointer-events 的有效值。我想你的意思是“汽车”
• Flex-grow 不控制元素本身的宽度，而是控制它会占用 flex 容器上多少可用额外空间。
• 实际宽度由 flex-basis 或宽度控制。
• 由于您没有为 flex-container 设置宽度，因此元素根本没有真正增长，因此您无法使用 flex-grow 来控制它们。

因此，您只需在 flex-container（在本例中为导航）设置宽度，或尝试设置和动画 flex-basis / widths。

class App extends React.Component {
  render() {
    return <div><Header/><main>This will contain some content that is scrollable and under the nav bar.</main></div>;
  }
}

class Header extends React.Component {

	constructor(props) {
  	super(props);
    this.state = { collapse: false };
  }
  
  handleNavClick = () => {
  	this.setState({ collapse: !this.state.collapse });
  };

  render() {
    return <header>
    <nav>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>This</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>Is</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>A</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>Navigation</a>
      <a className={this.state.collapse ? 'collapsed' : null } onClick={this.handleNavClick}>Bar</a>
    </nav>
  </header>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

header {
  font-family: sans-serif;
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  pointer-events: none;
}

header > nav {
  width:80%;
  display: flex;
  height: auto;
  flex-flow: row wrap;
  justify-content: center;
  padding-left: 1em;
  border-radius: 0 0 3px 3px;
  padding-right: 1em;
  background-color: rgba(20, 20, 20, 0.7);
  pointer-events: auto;
}

header > nav > a {
  display: flex;
  margin-left: 0.1em;
  margin-right: 0.1em;
  color: rgba(250, 250, 250, 1.0);
  padding: 0.5em 0.85em 0.5em 0.85em;
  flex-grow: 1;
  transition: flex-grow 1s ease-in-out;
}

header > nav > a:hover {
  cursor: pointer;
  pointer-events: default;
  color: rgba(255, 255, 255, 0.7);
}

.collapsed {
  flex-grow: 0.00001;
  color: rgba(250, 125, 125, 1.0);
}

main {
  height: 120vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>