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

Question

I'm working with a React project that requires me to use Flex in my styling. All have done is just not working have used almost all the flex property and yet it seems not to be working. My expected output is the image below

But this is what I'm getting below

Also, my Barchart Component is this

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>
  );
}

And my style sheet is this

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
   
    font-family: 'Montserrat';
    /* display: flex;
    justify-content: center;
    text-align: center; */
    height: 100vh;
    width: 100vw;
}
ul li{
    list-style: none;
}

.background_div{
   width: 100px;
   height: 100px;
}
.hexa_center{
    padding-top: 40px; 
}


.percent{
display: flex;
flex-direction: column;


}

.details{
 display: flex;
justify-content: flex-start;   
margin: 10px;
   
   }
   .country{
    
   }
   .content{
    
   }
   .population{
    
   }

App.js

import React from "react";
import Numbers from "./Numbers";
import Hexa from "./Hexa";
import "./Style.css";
import Bargroup from "./Bargroup";

export default function App() {
  // const numbers = [1]

  const numbers = [];
  for (let i = 0; i <= 31; i++) {
    numbers.push(i);
    if (i % 2 === 0) {
    }
  }

  const hexaColor = () => {
    let str = "0123456789abcdef";
    let color = "";
    for (let i = 0; i < 6; i++) {
      let index = Math.floor(Math.random() * str.length);
      color += str[index];
    }
    return "#" + color;
  };

  return (
    <div className="container">
      <div className="child">
        <div className="child_content">
          <h1> React</h1>
          <h2></h2>
        </div>
        <div className="ul">
          <ul>
            <Numbers className="block" numbers={numbers} />
          </ul>
        </div>

        <div className="child_content">
          <h1> React</h1>
          <h2> Colors</h2>
        </div>
        {new Array(32).fill(0).map((item, i) => {
          return <Hexa key={i} hexaColor={hexaColor} className="block" />;
        })}

        <div className="child_content">
          <h1> React</h1>
          <h2> Population</h2>
          <h3>Ten Most Populated Countries</h3>
          <Bargroup />
        </div>
      </div>
     
    </div>
  );
}

Answer 1

I can not see your imported sheet in main file. Under:

import React from "react";

Put:

import './pathToYourCss.css';

Answer 2

It's not so much the list that needs to be in a flex box (column), but the list item:

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

This should get you close. Cheers

Answer 3

Try to use this for the count element:

 Flex: 1; Justify-self: end;