主页 / coding / 问题 / 77829994
Accepted
Michel
Asked: 2024-01-17 12:36:59 +0800 CST

React 组件的显示问题。使用 Flexbox 时出现意外的尺寸

  • 772

我正在使用 NextJS/React 启动一个简单的测试应用程序。

下面是代码：

Board.tsx 文件内容：

import './Board.css';

export default function Board() {
    return <div className="board">
    <Row/>
    <Row/>
    <Row/>
  </div>
} /* End of Board */

function Row() {
    return <div className="row">
    <Cell/>
    <Cell/>
    <Cell/>
  </div>
} /* End of Row */

function Cell() {
    return <div className="cell"/>
} /* End of Cell */

以及 Board.css 文件内容：

.cell {
  width: 3rem;
  height: 3rem;
  background-color: rgb(255, 255, 0);
  border-width: 2px;
  border-color: rgb(55, 55, 55);
  margin: 11%;
}

.row {
  display: flex;
  flex-direction: row;
}

.board {
  display: flex;
  flex-direction: column;
}

顶部是 app/page.tsx 文件：

import Image from 'next/image'
import Board from './components/Board'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      X4C APP
      <Board/>
    </main>
  )
}

以下是运行应用程序时 Web 浏览器中显示的内容：

在此输入图像描述

最后我有一个问题。当 css 规定单元格组件的宽度和高度固定时，为什么我们看不到完美的黄色方块？

我可以通过实验看到，如果我删除这两个块

.row {...}
.board {...}

从 Board.css 文件中，我得到了完美的正方形。

那么是什么导致这两个区块出现这个问题呢？

css

1 个回答

  1. Best Answer

    这是因为您在此处以百分比 ( margin: 11%;) 形式向提供保证金Cell。如果将其更改为某个绝对值，例如 10px / 10rem，您将看到完美的正方形。

    由于flex-shrink单元格的默认值为1，因此如果单元格没有足够的空间，它将尝试缩小。留出余量%会占用 Cell 的可用空间，因此 Cell 会缩小。

    如果你想仍然保持边距%，你可以设置flex-shrink: 0;你的Cell，这将防止你的Cell收缩

    • 1

相关问题