Javascript 如何使用Reactjs中的动态内容在左侧开始新行？

我正在使用ReactJS制作个人投资组合页面。我目前正在尝试创建一个项目页面，其中有一行翻转卡片，但是，每当卡片达到其最大宽度并移动到下一行时，当需要从左侧开始时，卡片总是从页面中心开始。我已经尝试过创建一个float:left行包装器，它打破了应用程序和许多其他方法，但我希望看到从映射数组创建动态行和列并从左侧开始新行的最佳方法。添加图像以突出显示问题

Projects.js

import React, { Fragment } from 'react';

import Card from '../common/Card/Card';
import { PROJECTS } from "../../shared/constants/projects";
import "./projects.scss";

const Projects = () => {
    return (
        <Fragment>
            <div className="grid">
                {
                    PROJECTS.map((project, i) => {
                        return (
                            <Card animatedCard={true} project={project} key={i} />
                        )
                    })
                }
            </div>
        </Fragment>
    )
}

export default Projects;

Card.js

import React, { Fragment } from 'react';

import CardFront from './CardFront';
import "./card.scss";
import CardBack from './CardBack';

const Card = props => {
    return (
        <Fragment>
            {props.animatedCard ?
                <div className="card-container">
                    <div className="card-body">
                        <CardBack project={props.project}/>
                        <CardFront project={props.project} />
                    </div>
                </div> : null
            }
        </Fragment>
    )
}

---

由于您使用的是

文本对齐：居中.grid

css中的code>。 如果将其移除，则该行中的所有卡应从该行的左端开始：

.grid{
宽度：60%；
利润率：0.20%0.20%；
}

另一种选择是使您的

.grid

成为：

.grid{
宽度：60%；
利润率：0.20%0.20%；
显示器：flex；
柔性包装：nowrap；
}

由于您使用的是

文本对齐：居中.grid

css中的code>。 如果将其移除，则该行中的所有卡应从该行的左端开始：

.grid{
宽度：60%；
利润率：0.20%0.20%；
}

另一种选择是使您的

.grid

成为：

.grid{
宽度：60%；
利润率：0.20%0.20%；
显示器：flex；
柔性包装：nowrap；
}

import React, { Fragment } from 'react';

import CardFront from './CardFront';
import "./card.scss";
import CardBack from './CardBack';

const Card = props => {
    return (
        <Fragment>
            {props.animatedCard ?
                <div className="card-container">
                    <div className="card-body">
                        <CardBack project={props.project}/>
                        <CardFront project={props.project} />
                    </div>
                </div> : null
            }
        </Fragment>
    )
}

.button-wrapper {
  height: 200px;
  bottom: 0;
}

.card-container {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 50px 25px 0px 25px;
  width: 300px;
  height: 400px;
  perspective: 1000px;
}

.card-body {
  width: 100%;
  height: 100%;
  background-color: white;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}

.card-container:hover .card-body {
  transform: rotateY(180deg);
}

.card-container:hover > .card-body > .side-front {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in, visibility 0.75s linear;
}

.card-side {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: #8e8d8a;
  backface-visibility: hidden;
  font-family: sans-serif;
  text-align: center;
  box-shadow: 0 10px 35px rgba(50, 50, 93, 0.1), 0 2px 15px rgba(0, 0, 0, 0.07);
}

.card-header-img {
  max-width: 100%;
  max-height: 123px;
  margin: 0;
  padding: 0;
}

.card-technologies {
  list-style: none;
  width: 70%;
}

.card-technologies-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding: 0.75rem;
}

.description {
  margin: 30px 20px 20px 20px;
  font-size: 18px;
  font-weight: 400;
  height: 240px;
}

.side-front [class^="col-xs"]:first-of-type {
  padding-left: 0;
}

.side-back {
  z-index: 2;
  text-align: center;
  transform: rotateY(180deg);
}