Я не могу создать вертикальное направление с моей flexbox.
Демо здесь .
Несмотря на то, что я создал сетку специально, чтобы направить их вертикально.Я не могу понять, почему это не удается.Я попытался с базой flexbox, используя свойство direction, но это не удалось.
Вот мой фрагмент response.js:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import style from "./styles.css";
class App extends Component {
state = {
name: "",
email: "",
message: ""
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
sendForm = e => {
e.preventDefault();
console.log(
"form sent: ",
this.state.name,
this.state.email,
this.state.message
);
};
render() {
return (
<div>
<form className={style.mailform_container} onSubmit={this.sendForm}>
<div>
<input
className={style.mailform_name}
onChange={this.onChange}
name="name"
type="text"
value={this.state.name}
placeholder="name"
/>
<input
className={style.mailform_email}
onChange={this.onChange}
name="email"
type="text"
value={this.state.email}
placeholder="email"
/>
<textarea
className={style.mailform_message}
onChange={this.onChange}
name="message"
type="text"
value={this.state.message}
placeholder="message"
>
Enter text here...
</textarea>
</div>
<button type="submit" className={style.mailform_confirm}>
Envoyer
</button>
</form>
</div>
);
}
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
Вот мой фрагмент style.css:
.mailform_container {
display: grid;
grid-template-areas:
"name"
"email"
"message"
"confirm";
}
.mailform_name {
grid-area: name;
}
.mailform_email {
grid-area: email;
}
.mailform_message {
grid-area: message;
}
.mailform_confirm {
grid-area: confirm;
}
.nmailform_confirm:hover {
cursor: pointer;
}
.nmailform_confirm:active {
background-color: rgb(200, 198, 196);
}
Любой намек был бы полезен, спасибо