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&nbsp;React&nbsp;from&nbsp;"react";放：import&nbsp;'./pathToYourCss.css';

Answer 3

需要放在弹性框（列）中的与其说是列表，不如说是列表项：display: flex; flex-flow: row nowrap; .details, .population: flex-shrink: 0; content-wrapper: flex-grow: 2;这应该让你接近。干杯