css - 为什么 flex-direction 不能按照我设置的方式工作？ react js

Question

很简单。有一个标题、一个搜索栏和一些来自 API 的渲染内容。非常基本的东西。更基本的是，我调用一个 API 在搜索栏下方显示一堆电影图像。更简单吧？ search.map 开始映射过程，在它下面我有一个 ul，其中包含一些将要显示的 li 元素。但是它们只会下降……感觉不可能让它们并排移动。我试过将 display flex 和 flex-direction row 放在不同的 div 上，我试过在定义元素 css 之后放置 !important。没有什么。关于发生了什么事的任何想法？这是代码..

.form-div {
  margin-bottom: 1rem;
}

.container {
  align-items: center;
}

.searchbar {
  width: 760px;
  font-size: 1 rem;
  font-weight: 400;
  line-height: 1.5;
  outline: none;
  background-color: blanchedalmond;
  color: grey;
  border: 1x solid blueviolet;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
}

.searchBtn {
  color: white;
  background-color: black;
  font-size: 1rem;
  outline: none;
  min-height: 36px;
  font-weight: 400px;
  text-align: center;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.img-container h1 {
  padding: 10px;
}

.image-element {
  width: 250px;
  height: 320px;
  padding-left: 5px;
  padding-right: 5px;
}

.data-container {
  padding: 5px;
}

.flexed {
  display: flex;
  flex-direction: row;
  list-style: none;
}

import "./SearchBar.css";
import React, { useState } from "react";

const SearchBar = () => {
  const [search, setSearch] = useState([]);
  const [input, setInput] = useState("");

  const onUserInput = ({ target }) => {
    setInput(target.value);
  };

  const SearchApi = (event) => {
    const aUrl = "";
    const newUrl = aUrl + "&query=" + input;

    event.preventDefault();

    fetch(newUrl)
      .then((response) => response.json())
      .then((data) => {
        setSearch(data.results);
      })
      .catch((error) => {
        console.log("Error!! Data interupted!:", error);
      });
  };

  return (
    <div>
      <div className="container">
        <h1>Movie Search Extravaganza!</h1>

        <form>
          <input
            value={input}
            onChange={onUserInput}
            type="text"
            className="searchbar"
            aria-label="searchbar"
            placeholder="search"
          ></input>
          <button
            type="submit"
            onClick={SearchApi}
            aria-label="searchbutton"
            className="searchBtn"
          >
            Movie Express Search
          </button>
        </form>
      </div>

      {search.map((item) => (
        <ul className="flexed">
          <li key={item.id}>
            <img
              className="image-element"
              alt="poster"
              src={`https://image.tmdb.org/t/p/w500${item.poster_path}`}
            ></img>
          </li>
        </ul>
      ))}
    </div>
  );
};

Answer 1

父元素需要有display: flex。一个 flex 元素在一行中显示它的子元素。

你需要做的是:

<ul className="flexed">
  {search.map((item) => (
    <li key={item.id}>
      <img className="image-element" alt="poster" src={item.src}></img>
    </li>
  ))}
</ul>

您正在做的是您在 map 中也有 ul，这导致在 div 中有多个 flex ul。默认情况下，div 具有 display: block，因此元素显示在彼此下方。通过将所有 li 包装在一个 ul 中，您将获得所需的效果。