Как расширить компонент React, чтобы заполнить страницу flexbox - PullRequest
Новая
       2

Как расширить компонент React, чтобы заполнить страницу flexbox

0 голосов
/ 21 сентября 2019

Я сейчас пытаюсь создать боковую панель.У меня проблема в том, что контейнер для элемента «сжимается до его содержимого».

Я смотрел на альтернативные решения, такие как flex-grow, настройку App.css html, рост до 100% и т. Д., Но, похоже, ничего не работает!

В App.jsКласс приложения отображает следующее: 

      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%).

1 Ответ

0 голосов
/ 21 сентября 2019

Хитрость в разгоне флексбокса заключается в поддержании модели гибкого контейнера и гибких предметов.Когда вы применяете display: flex; к элементу, он становится контейнером flex, а непосредственные дочерние элементы становятся элементами flex.

Свойство flex используется для настройки элементов flex и сокращенно для <flex-grow> <flex-shrink> <flex-basis>,Итак, это правило ... 

flex: 1 0 10%;

... говорит, что элемент должен расти (flex-grow: 1;), не сжиматься (flex-shrink: 0;) и начинать с ширины 10% (* 1011)*).flex-basis определяет ширину, когда гибкий контейнер входит в flex-direction: row, что является значением по умолчанию.Если flex-direction: column, то основа будет представлять начальную высоту, но это для другого макета.

Ресурс, который укрепил мое понимание, и я настоятельно рекомендую делать закладки, так как он постоянно обновляется, чтобы отражать последние спецификации 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>
...