将flex内的div向右对齐[重复]

Posted 2023-03-05

【中文标题】将flex内的div向右对齐[重复]

【英文标题】：Align div inside a flex to the right [duplicate]

【发布时间】：2020-10-29 05:38:31

【问题描述】：

如何将专辑封面div 与卡片内的右侧对齐。我尝试使用 align-self: end 属性，但这似乎不起作用。有人可以帮忙吗？

.card 
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;


.image 
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;

<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>

【参考方案1】：

你可以将justify-content: space-between;添加到你卡片的css中：

.card 
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;


.image 
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;
  float: right;

<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>

【参考方案2】：

Flex有两个主轴，如果你想把专辑封面在主轴的右边对齐，你需要使用属性justify-content: space-between;来扩展你的音乐控件和专辑封面，space-between的项目是均匀分布在线路上；第一项在开始行，最后一项在结束行，您可以查看更多关于flex here

【参考方案3】：

我向音乐控件添加了一个新类，并添加了 flex-grow 值 2 和 align-self 值 flex-start。 然后对于.image，我添加了align-self 值flex-end 最后，我从image 中删除了硬编码的宽度/高度

祝你好运！

.card 
  display: flex;
  flex-direction: row;
  background-color: #005792;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  overflow: hidden;  


.music-controls
  display: flex;
  flex-grow: 2;


.image 
  display: flex;
  flex-grow: 1;
  background-color: #fd5f00;

<div class="card">
  <div class="music-controls">
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>