html - 如何扩展 React 组件以使用 Flexbox 填充页面

Question

我目前正在尝试创建一个侧边栏。我遇到的问题是元素的容器“缩小到它的内容”。

我已经研究了替代解决方案，例如 flex-grow、将 App.css html、body 高度设置为 100% 等。但似乎没有任何效果!

在 App.js 中，App 类呈现以下内容:

      return (
        <Router>
            <Navbar />
            <Route path="/" exact component={Landing} />
            <Route path="/dashboard" component={DashBar} />
        </Router>
     );

在 DashBar 中:

import React from 'react';
import styled from 'styled-components';

const Container = styled.div `
    display: flex;
    border: solid black 3px;
    flex: 1;
`

const DashBorder = styled.div `
    width: 10%;
    border-right: 2px shadow solid black;
    background-color: blue;
 `

 const OtherContent = styled.div `
    width: 90%;
    background-color: red;
`

class DashBar extends React.Component {

    render() {
        return (
            <Container>
                <DashBorder>Dash</DashBorder>
                <OtherContent>Other</OtherContent>
            </Container>
        );
    }
}

export default DashBar

问题:如何扩展 DashBorder 元素，使其适合整个页面(宽度为 10%)。

Answer 1

争论 Flexbox 的技巧是维护 Flex 容器和 Flex 项目的模型。当您申请display: flex;对于一个元素，它成为 Flex 容器，直接子元素成为 Flex 项目。

flex属性用于配置弹性项目，是 <flex-grow> <flex-shrink> <flex-basis> 的简写形式。 。所以这个规则...

flex: 1 0 10%;

...告诉该元素增大 ( flex-grow: 1; )，而不是缩小 ( flex-shrink: 0; )，并以 10% 宽度开始 ( flex-basis: 10%; )。 flex-basis定义弹性容器在 flex-direction: row 中流动时的宽度这是默认值。如果flex-direction: column那么基础将代表起始高度，但这是针对不同的布局的。

巩固了我的理解的资源，我强烈建议将其添加为书签，因为它会不断更新以反射(reflect)最新的 Flexbox 规范:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* { box-sizing: border-box; }
body { margin: 0; }

.container {
  display: flex;
  height: 100vh;
  border: 3px solid green;
}

.dashbar {
  flex: 1 0 10%;
  background: dodgerblue;
}

.other-content {
  flex: 1 0 90%;
  background: papayawhip;
}

<div class="container">
  <div class="dashbar">Dash</div>
  <div class="other-content">Other</div>
</div>