CSS Flex 属性不适用于我的 React 组件

Question

我正在处理一个要求我在样式中使用 Flex 的 React 项目。所做的一切只是不起作用已经使用了几乎所有的 flex 属性，但它似乎不起作用。我的预期输出是下图但这就是我在下面得到的另外，我的条形图组件是这样的import React from "react";const tenHighestPopulation = [  { country: "World", population: 7693165599, percentage: 0 },  { country: "China", population: 1377422166, percentage: 0 },  { country: "India", population: 1295210000, percentage: 0 },  { country: "USA", population: 323947000, percentage: 0 },  { country: "Indonesia", population: 258705000, percentage: 0 },  { country: "Brazil", population: 206135893, percentage: 0 },  { country: "Pakistan", population: 194125062, percentage: 0 },  { country: "Nigeria", population: 186988000, percentage: 0 },  { country: "Bangladesh", population: 161006790, percentage: 0 },  { country: "Russian", population: 146599183, percentage: 0 },  { country: "Japan", population: 126960000, percentage: 0 },];export default function Bargroup() {  for (var i = 0; i < tenHighestPopulation.length; i++) {    const max = Math.max.apply(      Math,      tenHighestPopulation.map(function (o) {        return o.population;      })    );    // console.log(max);    // we do the conversion here    tenHighestPopulation[i].percentage =      Math.round((tenHighestPopulation[i].population / max) * 100) + "%";  }  return (    <div className="percent" >      {tenHighestPopulation.map((countries, index) => (        <div key={index}  className="details">          <div className="country"> {countries.country}</div>       <div className="content"  style={{              backgroundColor: "yellow",              width: `${countries.percentage}`,            }}></div>           <div className="population"> {countries.population}</div>        </div>      ))}    </div>  );}

Answer 1

尝试将其用于计数元素：

Flex: 1;

Justify-self: end;

Answer 2

我在主文件中看不到您导入的工作表。在下面：

import React from "react";

放：

import './pathToYourCss.css';

Answer 3

需要放在弹性框（列）中的与其说是列表，不如说是列表项：

display: flex; flex-flow: row nowrap; .details, .population: flex-shrink: 0; content-wrapper: flex-grow: 2;

这应该让你接近。干杯