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

Question

这很简单。有一个标题、一个搜索栏和一些来自 API 的呈现内容。非常基本的东西。更基本的是，我调用一个 API 在搜索栏下方显示一堆电影图像。更简单吧？search.map 启动映射过程，在其下面我有一个 ul，其中有一些将要显示的 li 项目。但它们只会下降……感觉不可能让它们并排移动。我尝试过将显示 flex 和 flex-direction 行放在不同的 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>

相反，您所做的事情是您ul在地图内也有太多内容，这导致uldiv 内有多个 Flex。div 默认情况下有display: block，因此项目显示在彼此下方。通过将所有的lis 包裹在一个单一的文件中，ul您将获得所需的效果。