Question

我当前拥有的代码在这里。 https://codepen.io/bradenshipley/pen/RqzyJr

import React, { Component } from "react"

import "./App.css"
import axios from "axios"

class App extends Component {
 constructor(props) {
super(props)
this.state = {
  cards: []
}
  }
  componentDidMount() {
   const baseURL = "https://api.magicthegathering.io/v1"
    axios
     .get(`https://api.magicthegathering.io/v1/cards`)
  .then(res => this.setState({ cards: res.data.cards }))
}
 render() {
const card = this.state.cards.map(card => {
  return (
    <div className="card" key={card.number}>
      {/* <span className="cardName">{card.name}</span> */}
      <img
        className="cardImg"
        src={card.imageUrl}
        alt=""
        height="120px"
        width="80px"
          />
        </div>
      )
    })
    return (
      <div className="App">
        <div className="card-container">
           <div className="App-header">
            <h1>Magic The Gathering: Deck Builder</h1>
           </div>{" "}
           <div>{card}</div>
        </div>
      </div>
    )
  }
}

.App {
 height: 1000px;
[enter image description here][1]}

.App-header {
  background-color: #282c34;
  min-height: 25vh;
  min-width: 100vw;
  text-align: center;
  align-items: top;
  justify-content: top;
  font-size: calc(10px + 2vmin);
  color: white;
  position: top;
  display: absolute;
}

.cardImg {
  height: 350px;
  width: 250px;
}

.cardArea {
  flex: 1;
  width: 100vw;
  height: 75vh;
  overflow: auto;
}

.card-container {
  min-height: 400px;
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}
.card-container:after {
  display: block;
  content: "invisible node";
  flex: 999 999 auto;
}

.card {
  flex: 17 13 auto;
  margin: 0px;
  /* overflow: auto; */
}

我不完全清楚为什么flexbox将标头向下移动到中间，为什么它不遵循我设置的flex方向。我使用了flexbox样式工具来获取值，它看起来应该像所附的照片一样。任何指导将不胜感激。

Answer 1

问题出在<div className="card-container">上。 <div className="App-header">位于卡片容器的内部，该容器充当flex-parent元素，因此App-header是flex-child元素，并将根据flex-direction沿card div元素浮动。您必须将<div className="App-header">放置在<div className="card-container">外面

flexbox没有在React中包装内容

1 个答案: