Как мне заставить Flex работать в моем приложении реакции?

Question

По сути, у меня есть два настроенных дива, и я пытаюсь использовать flex box, чтобы легко их масштабировать, чтобы они оба одинаково занимали половину экрана по вертикали, используя реагирование.По какой-то причине они выглядят так.

Я пытался переустановить npm, но это не сработало вообще, и я уверен, что мой синтаксис в порядке.

Это мой App.css

.wrapper,html,body {
  height: 100%;
  margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;

  }

  .nav {
    background-color: red;
    flex: 1;

  }

  .main {
    background-color: blue;
    flex: 1;

  }

Это мой App.js

import {Row, Col } from "react-bootstrap";
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css'

class App extends Component {
  render() {
    return (
      <div className = 'wrapper'>

        <div className = 'nav'>
          <text>hey</text>
        </div>

        <div className = 'main'>
        <text>hey</text>
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

Ваш код в порядке, просто нужно добавить flex: 1 к классу оболочки .Вы можете прочитать больше о flex здесь: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

.wrapper,
html,
body {
	height: 100%;
	margin: 0;
     


}
  
.wrapper {
	display: flex;
	flex-direction: column;
    flex: 1;
}

.nav {
	background-color: red;
	flex: 1;
}

.main {
	background-color: blue;
	flex: 1;
}

<div class='wrapper'>

    <div class='nav'>
        <text>hey</text>
    </div>

    <div class='main'>
        <text>hey</text>
    </div>
</div>

Answer 2

Вы пропустили flex: 1 опору в определении .wrapper css.Определение должно выглядеть следующим образом:

.wrapper {
  display: flex;
  flex:1;
  flex-direction: column;
}

С flex: 1 вы указываете оболочке использовать все доступное пространство.В противном случае, он просто использует то, что ему нужно, независимо от высоты.

Вот весь CSS:

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.nav {
  background-color: red;
  flex: 1;
}

.main {
  background-color: blue;
  flex: 1;
}

См. Результат:

В любом случае, я полностью рекомендую использовать Bootstrap v4, который по умолчанию flexbox .

Answer 3

Они должны работать, если вы удалите flex-direction: column; - вы на самом деле хотите flex-direction: row;, что по умолчанию.