【问题标题】:Align div inside a flex to the right [duplicate]将flex内的div向右对齐[重复]
【发布时间】: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>

【问题讨论】:

    标签: html css


    【解决方案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-grow2align-selfflex-start
        • 然后对于.image,我添加了align-selfflex-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>

        【讨论】:

          猜你喜欢
          • 2020-11-06
          • 2019-01-16
          • 2018-07-29
          • 2018-03-31
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多