Css 我如何既能证明资源中心的合理性，又能使其成为柔性端？

我希望两个react函数组件都位于中心，同时保持

flex-end

与以前一样，如何实现这一点

当前：

我想要的是：

---

下面是React编写的代码，但我认为我的问题只是css flex box的使用问题

代码：

返回(
examQuestion.problemId，
数据：（examQuestion）=>{
返回[
{toCharacterIndex（examQuestion.questionOrder）}，
{examQuestion.problemId}，
{examQuestion.problemTitle}，
{examQuestion.score}，
{examQuestion.quota}，
{problemId===examQuestion.problemId？
再生
.
.
.
:
}
设置显示问题模式（非设置）}
OnConfigRejudge={rejudgeQuestion}/>
]
},
}}
showFilterSearchBar={false}/>
setShowAddQuestionModal（真）}>
添加新问题
setShowAddQuestionModal（假）}
onSubmitQuestion={addQuestion}/>
setShowEditQuestionModal（假）}
onSubmitQuestion={editQuestion}/>

简而言之：嵌套

flex

，

flexDirection

一行

一列

return (
        <div className="exam-questions font-poppins">
            <ExamInPageNavigationBar
                currentURL={currentURL}
                examName={currentExam.name}
                examId={examId}/>
            <div style={{paddingTop: "20px"}}>
                <div style={{display: "flex", justifyContent: "center"}}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
                        <ItemListPage
                            width="800px"
                            title="Questions"
                            tableHeaders={[
                                <TableCell>#</TableCell>,
                                <TableCell>Question ID</TableCell>,
                                <TableCell>Question Title</TableCell>,
                                <TableCell>Score Percentage</TableCell>,
                                <TableCell>Submission Quota</TableCell>, " "]}
                            tableDataStyle={{height: "60px"}}
                            tableRowGenerator={{
                                list: examQuestions,
                                key: examQuestion => examQuestion.problemId,
                                data: (examQuestion) => {
                                    return [
                                        <TableCell>{toCharacterIndex(examQuestion.questionOrder)}</TableCell>,
                                        <FakeLink>{examQuestion.problemId}</FakeLink>,
                                        <FakeLink>{examQuestion.problemTitle}</FakeLink>,
                                        <TableCell>{examQuestion.score}</TableCell>,
                                        <TableCell>{examQuestion.quota}</TableCell>,
                                        <div style={{width: "40px", height: "28px"}}>
                                            {rejudgeProblemId === examQuestion.problemId ?
                                                <span className="tag" style={{backgroundColor: "#FFBB00", color: "white"}}>
                                            Rejudging
                                                <span className="waitingForConnection">.</span>
                                                <span className="waitingForConnection2">.</span>
                                                <span className="waitingForConnection3">.</span>
                                        </span>
                                                :
                                                <div className="text-center">
                                                    <ThreeDotsButton dropDownItems={dropDownItems(examQuestion)}/>
                                                </div>
                                            }
                                            <RejudgeQuestionModal
                                                show={showRejudgeQuestionModal === examQuestion.problemId}
                                                title="Rejudge The Problem?"
                                                question={examQuestion}
                                                onClose={() => setShowRejudgeQuestionModal(NOT_SET)}
                                                onConfirmRejudge={rejudgeQuestion}/>
                                        </div>
                                    ]
                                },
                            }}
                            showFilterSearchBar={false}/>
                        <div className="add-question-btn"
                             onClick={() => setShowAddQuestionModal(true)}>
                            <span>Add New Question</span>
                        </div>
                    </div>
                </div>
            </div>

            <AddQuestionModal
                title="Create Question"
                show={showAddQuestionModal}
                onClose={() => setShowAddQuestionModal(false)}
                onSubmitQuestion={addQuestion}/>

            <EditQuestionModal title={"Edit Question"}
                               show={showEditQuestionModal}
                               question={editingQuestion}
                               onClose={() => setShowEditQuestionModal(false)}
                               onSubmitQuestion={editQuestion}/>
        </div>
    )

返回(
examQuestion.problemId，
数据：（examQuestion）=>{
返回[
{toCharacterIndex（examQuestion.questionOrder）}，
{examQuestion.problemId}，
{examQuestion.problemTitle}，
{examQuestion.score}，
{examQuestion.quota}，
{problemId===examQuestion.problemId？
再生
.
.
.
:
}
设置显示问题模式（非设置）}
OnConfigRejudge={rejudgeQuestion}/>
]
},
}}
showFilterSearchBar={false}/>
setShowAddQuestionModal（真）}>
添加新问题
setShowAddQuestionModal（假）}
onSubmitQuestion={addQuestion}/>
setShowEditQuestionModal（假）}
onSubmitQuestion={editQuestion}/>
)
你有没有试着证明你的自我呢？@MirentafazAli:我把它添加到了“添加新问题”一栏，它没有改变。
return (
        <div className="exam-questions font-poppins">
            <ExamInPageNavigationBar
                currentURL={currentURL}
                examName={currentExam.name}
                examId={examId}/>
            <div style={{paddingTop: "20px"}}>
                <div style={{display: "flex", justifyContent: "center"}}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
                        <ItemListPage
                            width="800px"
                            title="Questions"
                            tableHeaders={[
                                <TableCell>#</TableCell>,
                                <TableCell>Question ID</TableCell>,
                                <TableCell>Question Title</TableCell>,
                                <TableCell>Score Percentage</TableCell>,
                                <TableCell>Submission Quota</TableCell>, " "]}
                            tableDataStyle={{height: "60px"}}
                            tableRowGenerator={{
                                list: examQuestions,
                                key: examQuestion => examQuestion.problemId,
                                data: (examQuestion) => {
                                    return [
                                        <TableCell>{toCharacterIndex(examQuestion.questionOrder)}</TableCell>,
                                        <FakeLink>{examQuestion.problemId}</FakeLink>,
                                        <FakeLink>{examQuestion.problemTitle}</FakeLink>,
                                        <TableCell>{examQuestion.score}</TableCell>,
                                        <TableCell>{examQuestion.quota}</TableCell>,
                                        <div style={{width: "40px", height: "28px"}}>
                                            {rejudgeProblemId === examQuestion.problemId ?
                                                <span className="tag" style={{backgroundColor: "#FFBB00", color: "white"}}>
                                            Rejudging
                                                <span className="waitingForConnection">.</span>
                                                <span className="waitingForConnection2">.</span>
                                                <span className="waitingForConnection3">.</span>
                                        </span>
                                                :
                                                <div className="text-center">
                                                    <ThreeDotsButton dropDownItems={dropDownItems(examQuestion)}/>
                                                </div>
                                            }
                                            <RejudgeQuestionModal
                                                show={showRejudgeQuestionModal === examQuestion.problemId}
                                                title="Rejudge The Problem?"
                                                question={examQuestion}
                                                onClose={() => setShowRejudgeQuestionModal(NOT_SET)}
                                                onConfirmRejudge={rejudgeQuestion}/>
                                        </div>
                                    ]
                                },
                            }}
                            showFilterSearchBar={false}/>
                        <div className="add-question-btn"
                             onClick={() => setShowAddQuestionModal(true)}>
                            <span>Add New Question</span>
                        </div>
                    </div>
                </div>
            </div>

            <AddQuestionModal
                title="Create Question"
                show={showAddQuestionModal}
                onClose={() => setShowAddQuestionModal(false)}
                onSubmitQuestion={addQuestion}/>

            <EditQuestionModal title={"Edit Question"}
                               show={showEditQuestionModal}
                               question={editingQuestion}
                               onClose={() => setShowEditQuestionModal(false)}
                               onSubmitQuestion={editQuestion}/>
        </div>
    )