[英]How can I both justify-content center while make them flex-end?
我想要兩個反應 function 組件在中心,同時保持flex-end
像以前一樣,我該如何實現呢?
當前的:
我想要的是:
以下是編寫的代碼是 React,但我認為我的問題只是 css flex box 使用問題。
代碼:
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>
簡而言之:嵌套flex
, flexDirection
row
,一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>
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.