How can I both justify-content center while make them flex-end?

Question

I want both of the react function component in the center, while keep flex-end as before, how can I achieve this?

Current:

What I want:

---

THe following is the code which is written is React, but I think my problem is just a css flex box usage problem.

code:

return (
        <div className="exam-questions">
            <ExamInPageNavigationBar
                currentURL={currentURL}
                examName={currentExam.name}
                examId={examId}/>
            <div style={{paddingTop: "20px"}}>
                <div style={{display: "flex", flexWrap: "wrap", justifyContent: "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>,
                                    <TableCell><FakeLink>{examQuestion.problemId}</FakeLink></TableCell>,
                                    <TableCell><FakeLink>{examQuestion.problemTitle}</FakeLink></TableCell>,
                                    <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 style={{ flexBasis: "100%", height: "0" }}/>
                    <div className="add-question-btn"
                         style={{ alignSelf: "" }}
                         onClick={() => setShowAddQuestionModal(true)}>
                        <span>Add New Question</span>
                    </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>

Answer 1

In short: nested flex , flexDirection one row , one column .

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