ReactJS Flex布局问题

Question

对于在react.js中创建登录表单，我是新手，我搜索了一些关于如何在.css文件中使用以下代码对组件进行中心化的技巧：

display: flex;
justify-content: center;
align-items: center;

但是，当我在另一个组件(表单)中使用上面两个组件(按钮和明文)的代码时，应用程序告诉我，这两个组件都在同一行。我想纯文本会在按钮下面。

同一行上的两个组件的图像

这是我的密码：

SignIn.js

import React, { Component } from 'react';
import './SignIn.css'

class SignIn extends Component {
    render() {
        return (
            <div className="base-container">
                <div className="form">
                    <button className="sign-in-button" type="submit">
                        Sign In With Github
                    </button>
                    <div className="copyright">
                        Copyright © William Ji 2020
                </div>
                </div>
            </div>
        );
    }
}

export default SignIn;

SignIn.css

.base-container {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.form {
    width: 30vw;
    height: 40vh;
    background-color: whitesmoke;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border-width: 1px;
    display: flex;
}ß

.sign-in-button {
    padding: 20px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.copyright {
    color: rgba(0, 0, 0, 0.8);
    font-size: small;
}

App.js

import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import * as firebase from 'firebase';
import SignIn from './Components/Auth/SignIn';
import './App.css';

class App extends Component{
  render(){
    return(
      <div className="App">
        <SignIn />
      </div>
    )
  }
}

export default App;

Answer 1

您只需添加到容器样式的flex-wrap:wrap;就可以修复这个问题，还可以将其中的两个元素(按钮将其用div +纯文本包装)设置为宽度:100%

Answer 2

版权应该是一个p标签，而不是div，只是改变一下可能会把它推下去。如果没有，请确保它有显示:块；容器有弹性包装:包装；

Answer 3

在父元素中需要flex-direction: column;。使用display: flex;时，默认情况是flex-direction: row;。

​

#parent-with-flex-direction-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  margin: auto;
}

#parent-with-flex-direction-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  margin: auto;
}

.child {
  height: 2rem;
  width: 2rem;
  margin: 5px;
  background-color: blue;
}

<div id='parent-with-flex-direction-row'>
  <div class='child'>
  </div>
  <div class='child'>
  </div>
</div>
<div id='parent-with-flex-direction-column'>
  <div class='child'>
  </div>
  <div class='child'>
  </div>
</div>

​