html - CSS Flex 菜鸟在这里

Question

我找不到将所有内容放在同一条线上的方法。但我的标题（又名“azdazd”）必须是 flex-start 或类似的东西。我的编辑删除必须是 flex-end 或类似的东西。

不知道为什么会有这个紫色的破折号，似乎有些不对劲。

我的问题

CSS文件

.sheet {
  width: 100%;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 16px -8px rgba(0, 0, 0, 0.68);
  box-shadow: 0px 0px 16px -8px rgba(0, 0, 0, 0.68);
  margin: 30px 0;
}

.sheetWrapper {
  padding: 10px;
}

.headSheetWrapper {
  display: flex;
  width: 100%;
}

.sheetTitle {
  display: flex;
  justify-content: flex-start;
}

.edit-delete {
  display: flex;
  justify-content: flex-end;
}

引用我的 HTML 中有趣的部分

<div className="sheet">
   <div className="sheetWrapper">


       <div className="headSheetWrapper">
         <div className="sheetTitle">
           <h2>{sheet.title}</h2>
         </div>
         {!isEmpty(user[0]) && user[0].name === sheet.author && (
         <div className="edit-delete">
           <button onClick={() => setEditToggle(!editToggle)}>edit</button>
           <button onClick={() => dispatch(deleteSheet(sheet.id))}>delete</button>
         </div>
         )}
       </div>


   </div>
</div>

标签： htmlcssflexbox

Answer 1

.headSheetWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}